Add two variables inside style block Reactjs

Question

I am trying to put two variables inside a style block in Reactjs. How do you go about doing this?

var GlobalStyles = require(./jsStyles/GlobalStyles.js);
var moduleSpecificStyles = {
    hide:{
        'display':'none'
    },
    //more styles
};

...

render:function(){
    return (
        ...
        <div style={GlobalStyles.container, moduleSpecificStyles.hide}></div>
    )
}

This does not seem to work. It will work on either one if I only have one in. But adding both, I am not sure how to get it working.

romseguy · Accepted Answer · 2015-12-02 17:35:43Z

1

You need to compose style objects together, if you're using ES2015 then you can use Object.prototype.assign function.

<div style={Object.assign({}, GlobalStyles.container, moduleSpecificStyles.hide)}></div>

No matter whether your GlobalStyles.container object has a display: block property value or not, the composed style object will have display: none.

answered Dec 2, 2015 at 17:35

romseguy

1,56313 silver badges17 bronze badges

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

Comments

enjoylife · Accepted Answer · 2015-12-02 17:38:16Z

0

The style prop expects a single object with key value pairs. See docs for more.

If you want to combine the two, then use Object.assign mdn docs

render() {
   var style = Object.assign({}, GlobalStyles.container, moduleSpecificStyles.hide)
   return <div style=={style}></div>
}

answered Dec 2, 2015 at 17:38

enjoylife

3,8612 gold badges27 silver badges34 bronze badges

Collectives™ on Stack Overflow

Add two variables inside style block Reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related