jsx inline css styling

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<div style={{ width: '200px', backgroundColor: 'red' }}>

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 : {}} />