JSS Cannot target child to perform some basic css operations

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

One should be able to create something like: List item has a child which is hidden by default. When the List item gets hovered, the child gets displayed.

from here: http://cssinjs.org/jss-nested/?v=v6.0.1#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet

The component in question is this: <ListItemSecondaryAction className={classes.actionsContainer}>

Current Behavior

Trying to change a style of a child on parent hover. It doesn’t seem to work. I might as well be using it wrong though…

Should I do something to enable this behavior? As I understood the documentation the jss-nested should already be available?

Your Environment

Tech	Version
Material-UI	1.0.0-beta.41
React	16.3.0
browser
etc

[mnemanja]

@oliviertassinari I understand, no problem.

By the way, the problem was that the <ListItem> classes added with className actually get applied to the element that gets generated under the <li> item, but not the <li> itself. For that I’ve used ContainerProps={{ className: classes.listItem }} and declared the hover under the listItems style.

Sorry for taking your time for this trivial problem. I hope this might help someone else who encounters the same problem.

Cheers 😉

[HebaruSan]

@mnemanja, your solution worked for me and saved me many hours and much frustration! Thank you for sharing!