how to write inline css in react component without using other library?

Question

var Mynav = React.createClass({
    render:function(){
        return(
            <div /*style="font-size:100px;"*/>this is my nav bar</div>
        );
    }
});

React.render(<Mynav />,document.getElementById('nav'));

How can i write in the meaning of /*style="font-size:100px;"*/ ?

Felix Kling · Accepted Answer · 2015-11-17 05:06:11Z

1

You pass an object to the style prop:

style={{fontSize: '100px'}}

Properties are named exactly like the style object of DOM elements.

See the React documentation for more information.

answered Nov 17, 2015 at 5:06

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

1 Comment

Mike Driver Over a year ago

Super minor but you don't actually need the 'px' you can just do {{fontSize: 100}}.

Wim Mostmans · Accepted Answer · 2016-05-03 06:28:29Z

0

A simple example that does some dynamic styling based on a state would look like this:

style={{
   fontWeight: 'bold',
   color: this.state.active ? 'green' : 'red',
}}

answered May 3, 2016 at 6:28

Wim Mostmans

3,6231 gold badge22 silver badges20 bronze badges

Collectives™ on Stack Overflow

how to write inline css in react component without using other library?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related