How to add multiple style attributes to a react element? [duplicate]

Answer 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)}

Answer 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} /> );
    }
});