web-dev-qa-db-fra.com

Comment utiliser les pseudo-sélecteurs dans Material-UI?

J'ai essayé de réaliser la chose simple. J'essayais d'afficher/masquer mon composant <TreeMenu/> Dans l'interface utilisateur matérielle v1 avec des pseudo-sélecteurs, mais cela ne fonctionne pas. Voici le 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',",
        },
      },

La classe racine css fonctionne correctement sur la liste mais rootListItem ou même le sélecteur @global li ne fonctionne pas. Je ne suis pas sûr de ce que je fais mal avec les sélecteurs. J'ai lu la documentation matérielle-ui et dit que V1 prend en charge les pseudo-sélecteurs.

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>

Veuillez regarder le composant <TreeMenu >. J'ai appliqué 3 astuces différentes: 1) classe hoverEle avec le sélecteur '&:hover'. 2) J'ai essayé de remplacer la classe racine par défaut de <ListItemSecondaryAction> Avec ma classe rootListItem 3) Utiliser d'autres pseudo-sélecteurs sur li.See 'li > div.nth-of-type(1)':

cssreactjsmaterial-ui
15
connect2Coder

Après un certain temps à me battre pour que votre code soit opérationnel, j'ai trouvé ce qui ne va pas avec votre code.

Tout semble aller bien, le sélecteur de rootListItem fonctionne dès la sortie de la boîte, le problème est que vous ne pouvez pas utiliser le pseudo-sélecteur :hover sur un élément qui a display: none. Au lieu de cela, vous devriez utiliser opacity: 0 and opacity: 1, il masquera votre ListItemSecondaryAction mais en même temps il vous permettra de survoler. Ainsi, les éléments avec affichage: aucun, ne s'affiche pas techniquement et, par conséquent, vous ne pouvez pas les survoler.

À propos de votre pseudo sélecteur dans global, vous venez de l'écrire de manière incorrecte. Utiliser deux points au lieu d'un point après div et changer backgroundColor en 'jaune' au lieu de '' jaune '', "

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

Je ne savais pas à quoi ressemble votre TreeMenu en tant que composant, alors je viens de créer une liste avec les nœuds 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",
    },
},
};

Et:

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

* J'utilise treeNode qui est un tableau pour moi et j'ai supprimé le reste des fonctions et TreeMenu.

17
SirPeople