1//Multiple inline styles
2<div style={{padding:'0px 10px', position: 'fixed'}}>Content</div>
1// You are actuallty better off using style props
2// But you can do it, you have to double brace
3// and camel-case the css properties
4render() {
5 return (
6 <div style={{paddingTop: '2em'}}>
7 <p>Eh up, me duck!</p>
8 </div>
9 )
10}
1// Best option (in my opinion) is to make a style object, similar to a CSS class
2// This is especially useful when you want to use the style across multiple elements
3// Another plus is being able to make a lot of these styles in a util file, and import as needed
4// Keep in mind the CSS props need to be camel-cased
5
6const box = {
7 textAlign: 'center',
8 borderStyle: 'double'
9};
10const text = {
11 color: '#ff0000',
12 backgroundColor: '#888888'
13};
14
15renderBox() {
16 return (
17 <div style={box}> <p style={text}>
18 This is just a box, no need to worry.
19 </p> </div>
20 );
21}
22
23// The reason I prefer the above is readability and not as much duplication.
24// Alternatively, you can hard-code the styling.
25// Just remember, you're passing an object as the style prop.
26// So, first curlies are to say "hey, this is JS, not html"
27// Second curlies are to say "hey, this is an object"
28
29renderBox() {
30 return (
31 <div style={{textAlign:'center', borderStyle:'double'}}>
32 <p style={{color:'#ff0000', backgroundColor:'#888888'}}>
33 This is just a box, no need to worry.
34 </p>
35 </div>
36 );
37}
1// Typical component with state-classes
2<ul className="todo-list">
3 {this.state.items.map((item,i)=>({
4<li
5 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })}>
6 {item.name}
7</li>
8 })}
9</ul>
10
11// Using inline-styles for state
12<li className='todo-list__item'
13 style={(item.complete) ? styles.complete : {}} />