material ui component styles dynamic code example
Example 1: material ui common styles
const useStyles = makeStyles({
root: {
color: 'red',
'& p': {
color: 'green',
'& span': {
color: 'blue'
}
}
},
});
Example 2: material ui common styles
// Re-export with a default theme
import { makeStyles } from '@material-ui/core/styles';
// Original module with no default theme
import { makeStyles } from '@material-ui/styles';
Example 3: material ui common styles
// with npm
npm install @material-ui/styles
// with yarn
yarn add @material-ui/styles
Example 4: material ui common styles
const useStyles = makeStyles({
// style rule
foo: props => ({
backgroundColor: props.backgroundColor,
}),
bar: {
// CSS property
color: props => props.color,
},
});
function MyComponent() {
// Simulated props for the purpose of the example
const props = { backgroundColor: 'black', color: 'white' };
// Pass the props as the first argument of useStyles()
const classes = useStyles(props);
return <div className={`${classes.foo} ${classes.bar}`} />
}