Я пытался добиться простой вещи. Я пытался показать/скрыть свой компонент <TreeMenu/>
в пользовательском интерфейсе материалов v1 с псевдоселекторами, но как-то он не работает. Вот код: 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',",
},
},
Корневой класс css отлично работает в списке, но rootListItem или даже селектор @global li не работают. Я не уверен, что я делаю неправильно с селекторами. Я читаю материалы-документы и говорит, что V1 поддерживает псевдоселекторов.
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>
Посмотрите на компонент <TreeMenu >
. Я применил три разных трюка: 1) класс hoverEle с селектором '&:hover'
. 2) Пытался переопределить стандартный класс по умолчанию <ListItemSecondaryAction>
с моим классом rootListItem
3) Использование других псевдоселекторов в li.See 'li > div.nth-of-type(1)':