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

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