React / Material Скрытие дочернего элемента при наведении на него с помощью withStyles

Question

Я хочу, чтобы элемент ListItemSecondaryAction с действиями класса был скрыт при наведении курсора на ListItem с классом friendsListItem.

Я пытался использовать селектор-потомок в стилях, но он не работает.

const styles = (theme) => ({
  friendsListItem: {
    '&:hover $actions': {
      visibility: 'hidden'
    },
  },
  actions: {},
  iconButton: {},
  moreVertIcon: {},
});

      <List>
          <ListItem button key="Joe" className={classes.friendsListItem}>
              <ListItemSecondaryAction className={classes.actions}>
                <IconButton className={classes.iconButton}>
                  <MoreVertIcon className={classes.moreVertIcon}/>
                </IconButton>
            </ListItemSecondaryAction>
          </ListItem>
      </List>

Вставка всего кода, если необходимо: https://pastebin.com/4neuJRki

Я ожидаю, что ListItemSecondaryActions исчезнет, ​​когда я наведу курсор на ListItem, но ничего не произойдет.

Answer 1

Когда вы используете ListItemSecondaryAction, это несколько удивительно меняет структуру элемента li.

Без дополнительного действия у вас есть такая структура:

<li class="list-item-classname">
   whatever is in your ListItem
</li>

но с второстепенным действием, вы получаете что-то более похожее на:

<li class="container-classname">
   <div class="list-item-classname">
      whatever is in your ListItem
   </div>
   <div class="secondary-action-classname">
      whatever is in your secondary action
   </div>
</li>

Важная часть, которую следует заметить относительно структуры выше, заключается в том, что класс ListItem применяется к одноуровневому элементу вторичного объекта.действие, а не предку.Чтобы применить класс к родительскому элементу li, необходимо указать класс container.

From https://material -ui.com / api / list-item / # css:

контейнер - стили, применяемые к элементу container, если children включает ListItemSecondaryAction.

Вот синтаксис для этого:

        <ListItem
          button
          key="Joe"
          classes={{ container: classes.friendsListItem }}
        >