当使用withStyles悬停元素时，React / Material隐藏元素的孩子

Question

当我将鼠标悬停在带有FriendsListItem类的ListItem上时，我希望隐藏带有类动作的ListItemSecondaryAction元素。

我尝试在样式中使用decedent选择器，但是它不起作用。

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>

如果需要，请输入整个代码pastebin：https://pastebin.com/4neuJRki

当我将鼠标悬停在ListItem上时，我希望ListItemSecondaryActions消失，但是什么也没发生。

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类。

来自https://material-ui.com/api/list-item/#css：

  

容器-如果container包含children，则应用于ListItemSecondaryAction元素的样式。

这是它的语法：

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