search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.42k stars 31.84k forks source link

JSS Cannot target child to perform some basic css operations #11045

Closed mnemanja closed 6 years ago

mnemanja commented 6 years ago

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. screen shot 2018-04-17 at 10 52 05

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
oliviertassinari commented 6 years ago

@mnemanja Do you have a live example so I can play with it?

mnemanja commented 6 years ago

Unfortunately no :( Basically, it works when I hover the checkboxItem, but not the actionsContainer.

I'm not sure how to debug if the code is applied anywhere or not?

screen shot 2018-04-17 at 13 36 18 screen shot 2018-04-17 at 13 38 33

support[bot] commented 6 years ago

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however, this issue appears to be a support request or question. Please ask on StackOverflow where the community will do their best to help. There is a "material-ui" tag that you can use to tag your question.

If you would like to link from here to your question on SO, it will help others find it. If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

oliviertassinari commented 6 years ago

@mnemanja It's too much work for me without a reproduction. I can only make guesses. I'm gonna assume it's a usability issue and point you to StackOverflow.

mnemanja commented 6 years ago

@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 commented 6 years ago

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