I'm using React with Material-UI for a while and I noticed that in some examples, when they are using the useStyle
they create a class called root and then they use this tag & > *
. I tried searching what this means but it's hard to search for it.
Here follows an example from their documentation:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
'& > *': {
margin: theme.spacing(1),
width: theme.spacing(16),
height: theme.spacing(16),
},
},
}));
export default function SimplePaper() {
const classes = useStyles();
return (
<div className={classes.root}>
<Paper />
</div>
);
}