Dealing with material UI in my current project has become quite tiresome with the extensive use of className for each component item. This issue has led me to pose the following question:
import { makeStyles } from "@material-ui/core/styles";
import { Button } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
container: {
background: "pink"
},
item: {
height: "200px",
width: "200px",
background: "lightblue",
margin: "10px",
"&:last-of-type": {
background: "red"
},
h1: {
color: "green"
}
}
}));
export default function container() {
const classes = useStyles();
return (
<div className={classes.container}>
<div className={classes.item}>
<Button variant="contained" color="primary">
Primary
</Button>
</div>
<div className={classes.item}>
<h1>Text in 2nd item</h1>
<input type="text" />
</div>
<div className={classes.item}>
<h1>Text in last item</h1>
<Button variant="contained" color="primary">
Primary
</Button>
</div>
</div>
);
}
https://i.sstatic.net/MSANZ.png
Observing the code above, we have a container with a pink background containing 3 light blue background items:
The first item features a button imported from '@material-ui/core', the second one contains a h1 text and an input, while the last one has a h1 text and a button imported from '@material-ui/core'.
My goal is to change the color of the h1 text in the second item by altering the className item (avoid changing any className within the h1 tag) to yellow.
Additionally, I aim to modify the background color of the Material UI button in the last item only (without impacting the style of the Material UI button in the first item) by overriding the className .MuiButton-containedPrimary in the item class as well.
Feel free to make adjustments in the provided codesandbox link here. Thank you for your assistance, your help is greatly appreciated. Have a wonderful day!