gpt4 book ai didi

css - 如何在 material-ui 中使用伪选择器?

转载 作者:技术小花猫 更新时间:2023-10-29 10:20:18 24 4
gpt4 key购买 nike

我一直在努力实现简单的事情。我试图显示/隐藏我的 <TreeMenu/>带有伪选择器的 Material UI v1 中的组件,但不知何故它不起作用。这是代码:CSS:

      root: {
backgroundColor: 'white',
'&:hover': {
backgroundColor: '#99f',
},
},

hoverEle: {
visibility: 'hidden',
'&:hover': {
visibility: 'inherit',
},
},
rootListItem: {
backgroundColor: 'white',
display: 'none',
'&:hover': {
display: 'block',
backgroundColor: '#99f',
},
},
'@global': {
'li > div.nth-of-type(1)': {
display: 'block !important',
backgroundColor: "'yellow',",
},
},

根 css 类在列表上工作正常,但 rootListItem 甚至 @global li 选择器都不起作用。我不确定我在选择器上做错了什么。我阅读了 material-ui 文档并说 V1 支持伪选择器。

JSX:

<div>
{props.treeNode.map(node => (
<ListItem
key={`${node.Type}|${node.NodeID}`}
id={`${node.Type}|${node.NodeID}`}
className={(classes.nested, classes.root)}
button
divider
disableGutters={false}
dense
onClick={() => props.onNodeClick(node.Type, node.NodeID, node.NodeName)}
title={props.adminUser ? node.NodeID : ''}
onMouseOver={() => props.onMouseOver(node.Type, node.NodeID)}
>
<ListItemIcon>{props.listIcon}</ListItemIcon>
<ListItemText primary={node.NodeName} />
<ListItemSecondaryAction classes={{ root: classes.rootListItem }}>
<TreeMenu />
</ListItemSecondaryAction>
<div className={classes.hoverEle}>
<TreeMenu />
</div>
</ListItem>
))}
</div>

请看<TreeMenu >成分。我应用了 3 种不同的技巧:1) hoverEle 类 '&:hover'选择器。2) 试图覆盖 <ListItemSecondaryAction> 的默认根类和我的类(class)rootListItem3) 在 li 上使用其他伪选择器。参见 'li > div.nth-of-type(1)':

最佳答案

经过一段时间努力让您的代码启动并运行后,我发现您的代码有什么问题。

一切似乎都很好,rootListItem 的选择器开箱即用,问题是您不能在具有 display 的元素上使用伪选择器 :hover : 无。相反,您应该使用 opacity: 0 和 opacity: 1,它会隐藏您的 ListItemSecondaryAction,但同时它会让您悬停。因此,具有 display: none 的元素在技术上不显示,因此您不能悬停它们。

关于你在全局的伪选择器,你只是写错了。在 div 之后使用冒号而不是点并将 backgroundColor 更改为 'yellow' 而不是 "'yellow',"

'li > div:nth-of-type(1)': {
display: 'block !important',
backgroundColor: 'yellow',
},

我不知道你的 TreeMenu 作为一个组件看起来怎么样,所以我只是创建了一个包含 ul/li/div 节点的列表。

const styles = {
root: {
backgroundColor: 'white',
'&:hover': {
backgroundColor: '#99f',
},
},
hoverEle: {
visibility: 'hidden',
'&:hover': {
visibility: 'inherit',
},
},
rootListItem: {
backgroundColor: 'white',
opacity: 0,
'&:hover': {
opacity: 1,
backgroundColor: '#99f',
},
},
'@global': {
'li > div:nth-of-type(1)': {
display: 'block !important',
backgroundColor: "yellow",
},
},
};

和:

<div>
{treeNode.map(node => (
<ListItem
key={`${node.Type}|${node.NodeID}`}
id={`${node.Type}|${node.NodeID}`}
className={classes.root}
button
divider
disableGutters={false}
dense
onClick={() => {}}
title={''}
onMouseOver={() => {}}
>
<ListItemText primary={node.NodeName} />
<ListItemSecondaryAction classes={{ root: classes.rootListItem }}>
<ul><li><div>Elem 1</div></li><li><div>Elem 2</div></li></ul>
</ListItemSecondaryAction>
<div className={classes.hoverEle}>
<ul><li><div>Elem 1</div></li><li><div>Elem 2</div></li></ul>
</div>
</ListItem>
))}
</div>

*我正在使用对我来说是一个数组的 treeNode,我删除了其余的函数和 TreeMenu。

关于css - 如何在 material-ui 中使用伪选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47024404/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com