在Material-UI中如何使用伪选择器? [英] How to use pseudo selectors in material-ui?

问题描述

我一直在尝试实现简单的目标.我试图使用伪选择器在材质UI v1中显示/隐藏我的<TreeMenu/>组件，但是以某种方式无法正常工作.这是代码: CSS:

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:

      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支持伪选择器.

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.

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)具有'&:hover'选择器的hoverEle类. 2)尝试用我的类rootListItem覆盖默认的<ListItemSecondaryAction>根类 3)在li上使用其他伪选择器，请参见'li > div.nth-of-type(1)':

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 rootListItem 3) Using other pseudo selectors on li.See 'li > div.nth-of-type(1)':

推荐答案

一段时间后，为了使您的代码启动并运行，我发现您的代码出了什么问题.

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

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

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 :hover on 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.

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

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',"

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

我不知道您的TreeMenu看起来像一个组件，所以我只创建了一个带有ul/li/div节点的列表.

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

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.

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

这篇关于在Material-UI中如何使用伪选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！