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

Question

我一直在努力实现简单的事情。我试图使用伪选择器在材质 UI v1 中显示/隐藏我的 <TreeMenu/> 组件，但不知何故它不起作用。这是代码：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> rootListItem 3）在li上使用其他伪选择器。见 'li > div.nth-of-type(1)':

原文由 connect2Coder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

关于您在全局中的伪选择器，您只是写错了。在 div 之后使用冒号而不是点并将 backgroundColor 更改为“黄色”而不是“黄色”，

 '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。

原文由 SirPeople 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

只是加上 Jorge Santos Neil，你不一定需要使用道具。我正在添加针对不同场景测试的示例之一。请注意，这需要包含在“makeStyles”中，然后用作“className”。简单地将它放在 “styles={{}}” 中是行不通的。

例子：

 const useStyles = makeStyles((theme) => ({
  paragraphWithWarningDiv: {
    margin: "32px 0px 24px",
    "& :nth-child(1)": {
      marginBottom: "100px"
    }
  }
}));

原文由 Saikat halder 发布，翻译遵循 CC BY-SA 4.0 许可协议