Css 如何在材质ui中使用伪选择器？
我一直在努力实现这件简单的事情。我试图用伪选择器在material UI v1中显示/隐藏我的Css 如何在材质ui中使用伪选择器？,css,reactjs,material-ui,Css,Reactjs,Material Ui,我一直在努力实现这件简单的事情。我试图用伪选择器在material UI v1中显示/隐藏我的组件，但不知何故它不起作用。代码如下： CSS: 根css类在列表上工作正常，但rootListItem甚至@global li选择器都不工作。我不确定我在选择器方面做错了什么。我阅读了材料ui文档，并说V1支持伪选择器 JSX: {props.treeNode.map（节点=>( props.onNodeClick（node.Type、node.NodeID、node.NodeName）} titl
{props.treeNode.map（节点=>(
props.onNodeClick（node.Type、node.NodeID、node.NodeName）}
title={props.adminUser？node.NodeID:'}
onMouseOver={（）=>props.onMouseOver（node.Type，node.NodeID）}
>
{props.listIcon}
))}
'&:hover'rootListItem覆盖默认的
根类
3） 在li上使用其他伪选择器。请参阅'li>div.nth-of-type（1）:
经过一段时间的努力，我发现您的代码有什么问题
一切似乎都很好，rootListItem的选择器可以立即工作，问题是您不能在具有显示：none
的元素上使用伪选择器：hover
。相反，您应该使用不透明度：0和不透明度：1
，它将隐藏ListItemSecondary操作，但同时允许您悬停。因此，具有display:none的元素在技术上不会显示，因此不能将其悬停
关于全局中的伪选择器，您只是写错了。在div后面使用冒号而不是点，并将背景色更改为“黄色”而不是“黄色”
我不知道作为一个组件，您的treeemenu看起来如何，所以我只是创建了一个包含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",
},
},
};
以及：
{treeNode.map（节点=>(
{}}
标题={'}
onMouseOver={（）=>{}
>
- 要素1
- 要素2
- 要素1
- 要素2
))}
*我正在使用treeNode，它是我的一个数组，我删除了其余的函数和TreeMenu。对我有效的解决方案如下
export const useStyles = makeStyles(theme=>({
header:{
position: "relative!important",
background: "linear-gradient(150deg,#7795f8 15%,#6772e5 70%,#555abf 94%)",
margin: -50,
padding: -50,
height: 500,
},
span: props => ({
padding:50,
background: "rgba(255, 255, 255, .1)",
borderRadius: "50%",
position: "absolute",
"&:nth-child(1)": {
left: "-4%",
bottom: "auto",
background: "rgba(255, 255, 255, .1)"
},
"&:nth-child(2)":{
right: "4%",
top: "10%",
background: "rgba(255, 255, 255, .1)"
},
"&:nth-child(3)":{
top: 280,
right: "5.66666%",
background: "rgba(255, 255, 255, .3)"
},
"&:nth-child(4)":{
top: 320,
right: "7%",
background: "rgba(255, 255, 255, .15)"
},
"&:nth-child(5)":{
top: "38%",
left: "1%",
right: "auto",
background: "rgba(255, 255, 255, .05)"
},
"&:nth-child(6)": {
width: 200,
height: 200,
top: "44%",
left: "10%",
right: "auto",
background: "rgba(255, 255, 255, .15)"
},
"&:nth-child(7)": {
bottom: "50%",
right: "36%",
background: "rgba(255, 255, 255, .04)"
},
"&:nth-child(8)": {
bottom: 70,
right: "2%",
background: "rgba(255, 255, 255, .2)"
},
"&:nth-child(9)": {
bottom: "1%",
right: "2%",
background: "rgba(255, 255, 255, .1)"
},
"&:nth-child(10)": {
bottom: "1%",
left: "1%",
right: "auto",
background: "rgba(255, 255, 255, .05)"
}
}),
再加上豪尔赫·桑托斯·尼尔，你不一定需要使用道具。我正在添加一个针对不同场景测试的示例。需要注意的是，这需要包含在“makeStyles”中，然后用作“className”。简单地把它放在“styles={{}}”中是行不通的
例如：
const useStyles = makeStyles((theme) => ({
paragraphWithWarningDiv: {
margin: "32px 0px 24px",
"& :nth-child(1)": {
marginBottom: "100px"
}
}
}));
您想隐藏偶数元素吗？@Kinduser谢谢您的评论。请看部件。我正试图用CSS选择器隐藏该组件。我已更新了我的问题以获得更多澄清。您好，这似乎有点晚了，但下次您可以尝试发布代码笔。使调试和检查更容易；）@先生们：对不起。我会记住的。我只是想知道你有解决这个问题的办法吗？我刚刚发布了一个小的答案。您的方法是正确的，但在实现中有一些小错误@连接2代码谢谢。虽然我无法测试这段代码（因为我的代码进步了很多），但这解释了我做错了什么。所以，谢谢你的努力。虽然我很感谢你的回答，但我希望你看看这个问题最初提出的日期。当时没有挂钩。
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>
export const useStyles = makeStyles(theme=>({
header:{
position: "relative!important",
background: "linear-gradient(150deg,#7795f8 15%,#6772e5 70%,#555abf 94%)",
margin: -50,
padding: -50,
height: 500,
},
span: props => ({
padding:50,
background: "rgba(255, 255, 255, .1)",
borderRadius: "50%",
position: "absolute",
"&:nth-child(1)": {
left: "-4%",
bottom: "auto",
background: "rgba(255, 255, 255, .1)"
},
"&:nth-child(2)":{
right: "4%",
top: "10%",
background: "rgba(255, 255, 255, .1)"
},
"&:nth-child(3)":{
top: 280,
right: "5.66666%",
background: "rgba(255, 255, 255, .3)"
},
"&:nth-child(4)":{
top: 320,
right: "7%",
background: "rgba(255, 255, 255, .15)"
},
"&:nth-child(5)":{
top: "38%",
left: "1%",
right: "auto",
background: "rgba(255, 255, 255, .05)"
},
"&:nth-child(6)": {
width: 200,
height: 200,
top: "44%",
left: "10%",
right: "auto",
background: "rgba(255, 255, 255, .15)"
},
"&:nth-child(7)": {
bottom: "50%",
right: "36%",
background: "rgba(255, 255, 255, .04)"
},
"&:nth-child(8)": {
bottom: 70,
right: "2%",
background: "rgba(255, 255, 255, .2)"
},
"&:nth-child(9)": {
bottom: "1%",
right: "2%",
background: "rgba(255, 255, 255, .1)"
},
"&:nth-child(10)": {
bottom: "1%",
left: "1%",
right: "auto",
background: "rgba(255, 255, 255, .05)"
}
}),
const useStyles = makeStyles((theme) => ({
paragraphWithWarningDiv: {
margin: "32px 0px 24px",
"& :nth-child(1)": {
marginBottom: "100px"
}
}
}));