I've been attempting to accomplish a simple task. I wanted to toggle the visibility of my <TreeMenu/> component in material UI v1 using pseudo selectors, but for some reason it's not working. Here is the code:
CSS:
root: {
backgroundColor: 'white',
'&:hover': {
backgroundColor: '#99f',
},
},
hoverEle: {
visibility: 'hidden',
'&:hover': {
visibility: 'inherit',
},
},
rootListItem: {
backgroundColor: 'white',
display: 'none',
'&:hover': {
display: 'block',
backgroundColor: '#99f',
},
},
'@global': {
'li > div.nth-of-type(1)': {
display: 'block !important',
backgroundColor: "'yellow',",
},
},
The root css class works fine on the list, but rootListItem and even the @global li selector do not work. I'm unsure of what I'm doing wrong with these selectors. I've read the material-ui docs which state that V1 supports pseudo selectors.
JSX:
<div>
{props.treeNode.map(node => (
<ListItem
key={`${node.Type}|${node.NodeID}`}
id={`${node.Type}|${node.NodeID}`}
className={(classes.nested, classes.root)}
button
divider
disableGutters={false}
dense
onClick={() => props.onNodeClick(node.Type, node.NodeID, node.NodeName)}
title={props.adminUser ? node.NodeID : ''}
onMouseOver={() => props.onMouseOver(node.Type, node.NodeID)}
>
<ListItemIcon>{props.listIcon}</ListItemIcon>
<ListItemText primary={node.NodeName} />
<ListItemSecondaryAction classes={{ root: classes.rootListItem }}>
<TreeMenu />
</ListItemSecondaryAction>
<div className={classes.hoverEle}>
<TreeMenu />
</div>
</ListItem>
))}
</div>
Please pay attention to the <TreeMenu > component. I've tried 3 different methods:
1) Using hoverEle class with '&:hover' selector.
2) Attempting to override the default root class of <ListItemSecondaryAction> with my class rootListItem.
3) Utilizing other pseudo selectors on li. See 'li > div.nth-of-type(1)':