Material-UI

Why? Material-UI provides an easy way to extend our existing framework and makes it possible to use components like a drawer and snackbars. Another advantage is that we can change the theme on the fly.

Add styles

Functional components

styles.js

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    root: {
        width: "100%",
    },
    nested: {
        paddingLeft: theme.spacing(4),
    },
}))

export default useStyles

FunctionalComponent.js

import useStyles from './styles';

const SubSettingsGenerator = (props) => {
    const classes = useStyles()
    return <div className={classes.root}>
        ...
}

Class components

styles.js

const useStyles = theme => ({
  root: {
    display: 'flex',
  },
})

export default useStyles

ClassComponent.js

import useStyles from "./styles"
import { withStyles } from '@material-ui/core/styles';

class ClassComponent extends React.Component {
    render() {
        const { classes } = this.props
        return <div className={classes.root}>
            ...
    }
}

export default withStyles(styles, { withTheme: true })(ClassComponent);