Mui styled 적용하기

이슈

방법 1

const Button1 = styled(MuiButton)`
    & .MuiButton-outlinedSizeSmall {
      backgroundColor: black;
    },
`;

-> 공식문서에 이렇게 적혀있길래, 적용해보았는데 계속 적용이 되지 않음

• 영어를 잘 읽어보니 root element에서 적용이 된다는 것이었다.
  
  

방법 2

const Button1 = styled(MuiButton)`
  &. MuiButton-root {
    width: 500px;
    &. MuiButton-outlinedSizeSmall {
      width: 600px;
    }
  }
`;

-> 이렇게 해주었는데도 계속 적용 XX

• 혹시 몰라서 띄어쓰기를 빼봄 => 성공!
  

• 분명 공식 문서에 띄어쓰기가 되어 있었는데 억울하다!!!
  
  

최종

const Button1 = styled(MuiButton)`
  &.MuiButton-root {
    width: 500px;
    &.MuiButton-outlinedSizeSmall {
      width: 600px;
    }
  }

`;