Add inline style in reactjs without using JSX

Question

I am trying to add inline style to the element using reactjs. I found

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')'
};

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

in reactjs docs. Thing is, it is not working without JSX.

I tried doing this.

return (
        React.DOM.div({ className: 'eventsOuter'},
              {style:'divStyle'}
        )

But the style part is not working.

Is there any way to fix this?

Maybe {style: divStyle} ?

Dmitry Yaremenko
– Dmitry Yaremenko

2016-01-11 11:46:39 +00:00
Commented Jan 11, 2016 at 11:46 — Dmitry Yaremenko
– Dmitry Yaremenko, Commented Jan 11, 2016 at 11:46

Dmitry Yaremenko · Accepted Answer · 2016-01-11 11:58:23Z

3

You need to pass variable instead of variable name:

React.DOM.div({
    className: 'eventsOuter',
    style: divStyle
}, 'Hello World!')

Also you can compile online: on the babel website

edited Jan 11, 2016 at 11:58

answered Jan 11, 2016 at 11:53

Dmitry Yaremenko

2,59022 silver badges31 bronze badges

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

1 Comment

Joseph Rex Over a year ago

"You need to pass variable instead of variable name" is quite confusing. I think you mean - You need to pass a variable instead of the string of a variable name

Collectives™ on Stack Overflow

Add inline style in reactjs without using JSX

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related