Material-ui 선택자

리액트 + 머티리얼 ui + 스타일드 컴포넌트 사용

최근에는 머티리얼 ui를 이용해서 빨리빨리 만들려고 하고 있다. 컴포넌트도 그냥 갖다 쓰면되고, 약간씩 변경하는건 styles를 이용하면 된다.

근데 css 선택자를 사용해야 하는 상황이 발생했다. 도큐먼트에는 해당 항목 설명이 없고(내가 못찾았을지도)...

contentForm: {
  width: '62%',
   '& > :not(:last-child)': {
     marginBottom: `${calcRem(41)}`,
   },
  '& > :last-child': {
     marginBottom: `${calcRem(32)}`,
  },
},

대충 '&'가 자신을 선택하는 선택자로 보인다. '>'는 자식 선택을 하는 선택자이고, ':'를 앞에 붙여서 선택자 함수나 선택자를 이용하는 것으로 보인다. 많이 쓰다보면 익숙해지겠지.

datePicker: {
  display: 'flex',
  flexWrap: 'wrap',
  '& ~ h6': {
    margin: `0px ${calcRem(10)} 0px ${calcRem(10)}`,
    fontWeight: 400,
  },
},

위 코드처럼 '& ~ h6'은 다음 형제 요소 h6을 선택하는 선택자이다. 뭐 쓰다보니 css선택자와 비슷한 것 처럼 보인다.

근데 머터리얼 ui를 계속 쓰는게 내게 도움이 될 지 잘 모르겠다. 사이드 프로젝트는 스타일드 컴포넌트로만 해볼까 생각중이다.

https://material-ui.com/guides/api/#css-classes