I have incorporated material-ui into my project, here is an example of the code I am using:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
}));
export default function ContainedButtons() {
const classes = useStyles();
return (
<div className={classes.root}>
<Button variant="contained">Default</Button>
<Button variant="contained" color="primary">
Primary
</Button>
<Button variant="contained" color="secondary">
Secondary
</Button>
<Button variant="contained" disabled>
Disabled
</Button>
<Button variant="contained" color="primary" href="#contained-buttons">
Link
</Button>
</div>
);
}
This is my first experience with jss. As I experiment with & > *, attempting to grasp its functionality, it appears to be a CSS selector. However, after reviewing the documentation available here and here, I am encountering some confusion regarding the following:
While
*and>are familiar CSS selectors, can you explain the meaning behind&in this context?If I aim to restrict the CSS selector application solely to buttons, should I utilize
& > buttonor& > Button? Both seem to work, but considering that the final output presented to the browser isbutton, would it be preferred to opt for& > button?