How to use pseudo selectors in material-ui?

Question

I have been trying to achieve the simple thing. I was trying to show/hide my component in the material UI v1 with pseudo selectors but somehow it

Answer 1

After a while fighting to have your code up and running I found what is wrong with your code.

Everything seems to be fine, the selector for rootListItem works right out of the box, the problem is that you can not use the pseudo-selector :hover on an element that has display: none. Instead you should be using opacity: 0 and opacity: 1, it will hide your ListItemSecondaryAction but at the same time it will allow you to hover. So, elements with display: none, doesn't technically display and thereby, you cannot hover them.

About your pseudo selector in global, you just wrote it wrongly. Using colon instead of dot after div and changing backgroundColor to 'yellow' instead of "'yellow',"

'li > div:nth-of-type(1)': {
        display: 'block !important',
        backgroundColor: 'yellow',
    },

I didn't know how does your TreeMenu look like as a component, so I just created a list with ul / li / div nodes.

const styles = {
root: {
    backgroundColor: 'white',
    '&:hover': {
        backgroundColor: '#99f',
    },
},
hoverEle: {
    visibility: 'hidden',
    '&:hover': {
        visibility: 'inherit',
    },
},
rootListItem: {
    backgroundColor: 'white',
    opacity: 0,
    '&:hover': {
        opacity: 1,
        backgroundColor: '#99f',
    },
},
'@global': {
    'li > div:nth-of-type(1)': {
        display: 'block !important',
        backgroundColor: "yellow",
    },
},
};

And:

    {treeNode.map(node => (
         {}}
            title={''}
            onMouseOver={() => {}}
        >
            
            
                
Elem 1
Elem 2
            
            

                
Elem 1
Elem 2
            
        
    ))}

*I am using treeNode that is an array for me and I removed the rest of the functions and TreeMenu.