styling in reactjs code example

Example 1: 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 2: react div style

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

Example 3: Styling React Using CSS

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Example 4: use styles in react

const useStyles = makeStyles(theme => ({
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    border: '1px solid red',
  },
}));
function App() {
  const classes = useStyles();
return (
    <TextField
      id="outlined-name"
      label="Name"
      className={classes.textField}
      margin="normal"
      variant="outlined"
    />
  );
}

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