当我将鼠标悬停在具有类 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 消失,但什么也没发生。
最佳答案
当您使用 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 ifchildren
includesListItemSecondaryAction
.
语法如下:
<ListItem
button
key="Joe"
classes={{ container: classes.friendsListItem }}
>
关于javascript - React/Material 使用 withStyles 将鼠标悬停在元素上时隐藏元素的子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55315206/