web-dev-qa-db-ja.com

material-uiで擬似セレクターを使用する方法は？

私は単純なことを達成しようとしています。擬似セレクターを使用してマテリアル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-uidocsを読んで、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）_'&:hover'_セレクターを持つhoverEleクラス。 2）_<ListItemSecondaryAction>_のデフォルトのルートクラスを私のクラスrootListItemでオーバーライドしようとしました。3）liで他の擬似セレクターを使用します。'li > div.nth-of-type(1)':を参照してください。

cssreactjsmaterial-ui
15
connect2Coder

しばらくして、コードを起動して実行するために戦いましたが、コードの何が問題なのかがわかりました。

RootListItemのセレクターはすぐに動作しますが、問題は:hoverを持つ要素でdisplay: none擬似セレクターを使用できないことです。代わりにopacity: 0 and opacity: 1を使用する必要があります。ListItemSecondaryActionは非表示になりますが、同時にホバリングできます。したがって、表示：なしの要素は技術的に表示されないため、ホバーできません。

グローバルでの疑似セレクターについては、間違って記述しただけです。 divの後にドットの代わりにコロンを使用し、backgroundColorを「 'yellow'」ではなく「yellow」に変更します。

'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を削除しました。

17
SirPeople