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

1const useStyles = makeStyles(theme => ({
2  textField: {
3    marginLeft: theme.spacing(1),
4    marginRight: theme.spacing(1),
5    border: '1px solid red',
6  },
7}));
8function App() {
9  const classes = useStyles();
10return (
11    <TextField
12      id="outlined-name"
13      label="Name"
14      className={classes.textField}
15      margin="normal"
16      variant="outlined"
17    />
18  );
19}

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