빌드 시 antd & styled component 우선 순위 문제

eaasurmind·2022년 9월 4일
0

TIPS

목록 보기
3/12

antd & styled component Override

 .ant-col-9 {
    display: block;
    flex: 0 0 37.5%;
    max-width: 37.5%;
}

.eimhEt {
  	display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 16px;
}

flex가 무시된다. display: flex

  • col에 display를 override해서 사용하였는데 로컬에서는 문제가 없다가 빌드하면 css가 깨져보였습니다.

  • stackoverflow를 참고해보면 하단과 같은 의견이 있었습니다.

And it appears that the antd styles are being added later to the document so they are "winning" over the styled-components classes.

  • 확정적으로 styled component쪽을 사용하기 위해 !important보다는 스타일드 컴포넌트 권장방식인 &&&{}로 감싸는 방식으로 처리하였습니다.
  &&& {
 	display: flex;
    align-items: center;
    padding-left: 16px;
  }

참고

https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity

https://stackoverflow.com/questions/69898669/conflict-with-styled-component-classes-antd-classes-in-a-single-spa-microfront

profile
You only have to right once

0개의 댓글