material-ui에서 의사 선택기를 사용하는 방법

material-ui에서 의사 선택기를 사용하는 방법

나는 간단한 것을 성취하기 위해 노력해 왔다.나는 내 모습을 보여주거나 숨기려고 했다.<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',",
        },
      },

root css 클래스는 목록에서는 정상적으로 동작하지만 root List는아이템 또는 @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'selector. 2) 디폴트 루트클래스를 덮어쓰려고 했습니다.<ListItemSecondaryAction>우리 반과rootListItem3) li에 다른 의사 선택기를 사용한다.봐'li > div.nth-of-type(1)':

잠시 후 코드를 가동시키기 위해 안간힘을 썼지만, 당신의 코드에 문제가 있는 것을 알게 되었습니다.

root List의 셀렉터로서 모든 것이 정상인 것 같습니다.아이템은 개봉 즉시 동작합니다.문제는 의사 선택기를 사용할 수 없다는 것입니다.:hover가지고 있는 요소에서display: none그 대신에, 를 사용해 주세요.opacity: 0 and opacity: 1ListItemSecondaryAction은 숨겨지지만 동시에 마우스를 이동할 수 있습니다.즉, "없음"이 있는 요소는 기술적으로 표시되지 않으므로 마우스를 이동할 수 없습니다.

글로벌에서의 당신의 유사 셀렉터에 대해서, 당신은 단지 잘못 적었을 뿐입니다.div 뒤에 점 대신 콜론을 사용하고 backgroundColor를 "노란색" 대신 "노란색"으로 변경합니다.

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

Tree Menu가 컴포넌트로 어떻게 생겼는지 몰라서 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>

* 어레이인 tree Node를 사용하고 있으며, 나머지 기능과 Tree Menu는 삭제했습니다.

나에게 효과가 있었던 솔루션은 다음과 같다.

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

        }),

Jorge Santos Neil과 함께라면 소품을 사용할 필요가 없습니다.다른 시나리오에 대해 테스트된 예 중 하나를 추가합니다.주의: 이것은 "makeStyles"에 포함되어 "className"으로 사용되어야 합니다.「 styles = }} } 」에 넣는 것만으로 되는 것은 아닙니다.

예:

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

언급URL : https://stackoverflow.com/questions/47024404/how-to-use-pseudo-selectors-in-material-ui