react jsx style code example

Example 1: inline style jsx

//Multiple inline styles
<div style={{padding:'0px 10px', position: 'fixed'}}>Content</div>

Example 2: inline style react

// You are actuallty better off using style props
// But you can do it, you have to double brace
// and camel-case the css properties
render() {
	return (
    	<div style={{paddingTop: '2em'}}>
      		<p>Eh up, me duck!</p>
      	</div>
    )
}

Example 3: react div style

return <div style={{display: 'inline-block'}}>

Example 4: jsx inline css styling

// Best option (in my opinion) is to make a style object, similar to a CSS class
// This is especially useful when you want to use the style across multiple elements
// Another plus is being able to make a lot of these styles in a util file, and import as needed
// Keep in mind the CSS props need to be camel-cased

const box = {
  textAlign: 'center',
  borderStyle: 'double'
};
const text = {
  color: '#ff0000',
  backgroundColor: '#888888'
};

renderBox() {
  	return (
    	<div style={box}> <p style={text}>
      		This is just a box, no need to worry.
        </p> </div>
  	);
}

// The reason I prefer the above is readability and not as much duplication.
// Alternatively, you can hard-code the styling.
// Just remember, you're passing an object as the style prop.
// So, first curlies are to say "hey, this is JS, not html"
// Second curlies are to say "hey, this is an object"

renderBox() {
	return (
    	<div style={{textAlign:'center', borderStyle:'double'}}>
      		<p style={{color:'#ff0000', backgroundColor:'#888888'}}>
              	This is just a box, no need to worry.
            </p>
		</div>
	);
}

Example 5: inline style react

// Typical component with state-classes
<ul className="todo-list">
  {this.state.items.map((item,i)=>({
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })}>
            {item.name}
</li>
 })}
</ul>

// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />