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

Question

提问by connect2Coder

I have been trying to achieve the simple thing. I was trying to show/hide my <TreeMenu/>component in the material UI v1 with pseudo selectors but somehow it does not work. Here is the code : CSS:

我一直在努力实现简单的事情。我试图<TreeMenu/>用伪选择器在材质 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',",
        },
      },

The root css class works fine on the list but rootListItem or even the @global li selector does not work. I am not sure what I am doing wrong with selectors.I read the material-ui docs and says that V1 supports the pseudo selectors.

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

JSX:

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>

Please look at the <TreeMenu >component. I have applied 3 different tricks: 1) hoverEle class with '&:hover'selector. 2) Tried to override the default root class of <ListItemSecondaryAction>with my class rootListItem3) Using other pseudo selectors on li.See 'li > div.nth-of-type(1)':

请查看<TreeMenu >组件。我应用了 3 种不同的技巧：1）带有'&:hover'选择器的hoverEle 类。2) 试图<ListItemSecondaryAction>用我的类覆盖默认的根类rootListItem3) 在 li.See 上使用其他伪选择器 'li > div.nth-of-type(1)':

Answer 1

采纳答案by SirPeople

After a while fighting to have your code up and running I found what is wrong with your code.

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

Everything seems to be fine, the selector for rootListItem works right out of the box, the problem is that you can not use the pseudo-selector :hoveron an element that has display: none. Instead you should be using opacity: 0 and opacity: 1, it will hide your ListItemSecondaryAction but at the same time it will allow you to hover. So, elements with display: none, doesn't technically display and thereby, you cannot hover them.

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

About your pseudo selector in global, you just wrote it wrongly. Using colon instead of dot after div and changing backgroundColor to 'yellow' instead of "'yellow',"

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

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

I didn't know how does your TreeMenu look like as a component, so I just created a list with ul / li / div nodes.

我不知道你的 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",
    },
},
};

And:

和：

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

*I am using treeNode that is an array for me and I removed the rest of the functions and TreeMenu.

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

Answer 2

回答by Jorge Santos Neill

The solution that worked for me is the following

对我有用的解决方案如下

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)"
            }

        }),

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

提问by connect2Coder

采纳答案by SirPeople

回答by Jorge Santos Neill

相关推荐

最近更新

标签

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

提问by connect2Coder

采纳答案by SirPeople

回答by Jorge Santos Neill

相关推荐

IE 中 CSS 变量的解决方法？

带有 SVG 图像的 CSS 光标指针

CSS 仅适用于媒体查询中的 IE 11 屏幕尺寸

CSS 如何使用类道具在 Material UI 中添加多个类

相关推荐

最近更新

标签