javascript - React/Material 使用 withStyles 将鼠标悬停在元素上时隐藏元素的子元素

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 -- Styles applied to the container element if children includes ListItemSecondaryAction.

语法如下:

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