Как использовать псевдоселекторы в материале-ui?

Я пытался добиться простой вещи. Я пытался показать/скрыть свой компонент <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)':

Ответ 1

После некоторого времени, пытаясь запустить ваш код, я обнаружил, что не так с вашим кодом.

Кажется, все в порядке, селектор для rootListItem работает прямо из коробки, проблема в том, что вы не можете использовать псевдоселектор :hover на элемент с display: none. Вместо этого вы должны использовать opacity: 0 and opacity: 1, он скроет ваш ListItemSecondaryAction, но в то же время он позволит вам навести курсор. Таким образом, элементы с дисплеем: нет, технически не отображаются и, следовательно, вы не можете их навестить.

О вашем псевдоселекторе в глобальном, вы просто написали его неправильно. Использование двоеточия вместо точки после div и изменение backgroundColor на "желтый" вместо "желтый",

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

Я не знал, как ваш TreeMenu выглядит как компонент, поэтому я просто создал список с узлами ul/li/div.

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",
    },
},
};

А также:

<div>
    {treeNode.map(node => (
        <ListItem
            key={'${node.Type}|${node.NodeID}'}
            id={'${node.Type}|${node.NodeID}'}
            className={classes.root}
            button
            divider
            disableGutters={false}
            dense
            onClick={() => {}}
            title={''}
            onMouseOver={() => {}}
        >
            <ListItemText primary={node.NodeName} />
            <ListItemSecondaryAction classes={{ root: classes.rootListItem }}>
                <ul><li><div>Elem 1</div></li><li><div>Elem 2</div></li></ul>
            </ListItemSecondaryAction>
            <div className={classes.hoverEle}>
                <ul><li><div>Elem 1</div></li><li><div>Elem 2</div></li></ul>
            </div>
        </ListItem>
    ))}
</div>

* Я использую treeNode, который является массивом для меня, и я удалил остальные функции и TreeMenu.

Ответ 2

Добавляя это сейчас, я потратил некоторое время, пытаясь следовать ответу SirPeople.

Псевдоселекторы нельзя использовать со встроенными стилями. Там еще немного информации в ответе на этот вопрос. Реагировать псевдо-селектор встроенного стиля