Select child element in Inline styling ( Material UI makestyles ) - material-ui

Question

I'm using material ui makeStyles for styling and unable to select child element from style.js
style.css
.item:hover > .subListItem {
display: block;
}
When I changed it to inline styling, it isn't working.
style.js
item: {
"&:hover > .subListItem": {
display: "block",
},
},
Here's how I have applied classes
<li className={classes.item}>
<Paper elevation={3} className={classes.subListItem}>
<ul className={classes.subItem}>
<li>
<Link to="/cs">COMPUTER SOCIETY</Link>
</li>
<li>
<Link to="/ras">RAS</Link>
</li>
<li>
<Link to="/wie">WIE</Link>
</li>
</ul>
</Paper>
</li>
What is the correct way to select child element in inline styling?

Answer 1

MUI class names are non-deterministic, please take some time to consult the documentation on what that means.
classes.subListItem does not result in a subListItem class being attached to the DOM element. You can also see this behavior by inspecting the element in the DevTools.
To make this work, you need a static class name:
<Paper elevation={3} className="subListItem">
Some related notes:
"inline styling" refers to the use of the style attribute, which is not the case here. What you are doing is called CSS-in-JavaScript, or more specifically, JSS. You are still using the class attribute though.
The use of the child combinator can be tricky, as a single MUI component can result in multiple DOM elements and you might not always want to target direct children. Each component API will give you hints on how to change styles.