How to add multiple style attributes to a react element?
Solution 1
style
is just an Object, with css value turn to camelCase, so you could use any way to merge two object, and it should work.
ES6: style={Object.assign({}, style1, style2)}
ES7: style={{...style1, ...style2}}
lodash: style={_.merge({}, style1, style2)}
Solution 2
as @michealmuxica said, the style prop is is just a JS object with camel casing for the keys. So you can set your style on your components as such:
<MyComponent style={{height:"100%", marginLeft:"70%"}} />
I prefer to create another JS file per component to contain the style objects, then import them into the component's file. I feel like this keeps the code more clean and modular:
//in MyComponentStyles.js
var style = {
base:{
height:"100%",
width: "100%",
marginLeft: "auto",
marginRight: "auto"
},
//...other styles...
};
export default styles;
//in MyComponent.js
import {default as MyComponentStyles} from "./<path to styles>/MyComponentStyles.js;
var App = React.createClass({
render: function() {
return ( <MyComponent style={MyComponentStyles.base} /> );
}
});
Michael Stearn
BY DAY I: Develop front end user interfaces. BY NIGHT I: Play with React/Redux and various apis, break my linux installations, and pretend I know what I'm doing until I make something pretty with sketch 3. FOR FUN I: 나는 한국어를 배우고 있어, Cook, try each DC Brunch spot, 3D Print random things.' The Creative Process Begins and ends with empathy.
Updated on June 08, 2020Comments
-
Michael Stearn about 4 years
How would I go about adding multiple style attributes to my React element?
Some of the components in my app are using the same styles throughout with minor variations in styles. I am trying to accomplish something along the lines of
<div style={this.styles.mainStyle, this.styles.variationInStyle}></div>
.These styles are in a file called styles.js hence the
this.styles.x
. It works with only one style in it. The closest I found to this solution was in a Reddit Post. The solution was<div style={$.extend({}, style1, style2)}></div>
but of course, it doesn't work nor does the variation<div style={style1, style2)}></div>
.Any insight would be greatly appreciated! I will also be posting in Reddit and the Reactiflux Discord group if the answer should come from either source, I will post the answer here.
-
Michael Stearn over 8 yearsHow would that work if these styles are in a separate sheet from the component it is being added to? In order to access the styles, I have to type this.styles.style1} Also, the syntax on your ES6 example has an unclosed parenthesis after
.assign
-
Trung Tín Trần over 8 yearsI don't get it. What problem are you facing? it just and object, what prevent you from merging two javascript object? If it from two stylesheet then
const style1 = require('./style1.css'); const style2 = require('./style2.css');
Or if it's inline style then it's already an object, isn't it? -
Rose almost 8 yearsI'm getting an 'Unexpected token export' error with this
-
Justin Kruse almost 8 yearsThe answer for this question may help: stackoverflow.com/questions/33448675/… I'm using babel and have been caught up on the presets before, too.
-
Steffo Dimfelt over 5 yearsIn React Native you can use an array inside curly brackets:
style={[style1, style2]}