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

Question

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

我曾尝试在样式中使用死者选择器，但它不起作用。

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 消失，但什么也没发生。

标签： javascriptreactjsmaterial-ui

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元素的样式。childrenListItemSecondaryAction

这是它的语法：

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