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