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

Question

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.

MD Ashik · Accepted Answer · 2017-06-08 07:24:59Z

39

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

edited Jun 8, 2017 at 7:24

MD Ashik

9,89310 gold badges56 silver badges61 bronze badges

answered Jan 18, 2016 at 2:27

Trung Tín Trần

5104 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Stearn Over a year ago

How 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 a year ago

I 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?

Steffo Dimfelt Over a year ago

In React Native you can use an array inside curly brackets: style={[style1, style2]}

john k Over a year ago

@SteffoDimfelt Failed to set an indexed property [0] on 'CSSStyleDeclaration': Indexed property setter is not supported.

Justin Kruse · Accepted Answer · 2016-01-18 03:30:31Z

11

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

answered Jan 18, 2016 at 3:30

Justin Kruse

1,1401 gold badge13 silver badges29 bronze badges

2 Comments

Rose Over a year ago

I'm getting an 'Unexpected token export' error with this

Justin Kruse Over a year ago

The answer for this question may help: stackoverflow.com/questions/33448675/… I'm using babel and have been caught up on the presets before, too.

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Linked

Related