Styled-Components와 Material-UI 함께 사용하다 생긴 문제

프로젝트를 하면서 Material-UI와 Styled-Components를 사용할때, 뼈대는 Material-UI를 사용하지만 Styled-Components로 세부적인 부분들을 수정하고 싶을 때가 있었다

예를들면:

import Button from "@material-ui/core/Button";

Button: styled(Button)`
    border-right: 0.5px solid ${theme.GRAY_SCALE.LINE};
    width: 160px;
    height: 40px;
    font-size: 13px;
    font-weight: bold;
    color: ${theme.GRAY_SCALE.LABEL};
  `,

하지만 제대로 먹질 않았다.

그 이유는 아무런 설정을 해주지 않고 놔두면 Material-UI의 <style> 이 Styled-Components의 <style> 보다 아래에 선언되기 때문이다. 그래서 `styled(Button)``` 같은 선언이 무효화된다.

즉 쉽게 말하자면 Vanilla JS 에서 class="black pink" 뭐 이런식으로 선언되면 black보다 pink가 우선순위로 결정되어 적용되는 것과 마찬가지로, 여기선 표현하자면 class=styled-components Material-ui 요런식으로 된다.

해결책:

<StylesProvider injectFirst> 사용하기!

import { StylesProvider } from "@material-ui/core/styles";

const App = () => {
  return (
    <div className="App">
      <StylesProvider injectFirst>
        <MyRecoilRoot>
          <RecoilRoot>
            <Suspense fallback={<div>Loading...</div>}>
              <GlobalStyles />
              <Router />
            </Suspense>
          </RecoilRoot>
        </MyRecoilRoot>
      </StylesProvider>
    </div>
  );
};

이런식으로 최상위 부모에 StylesProvider injectFirst를 적용하면 된다~

이러면 원하던대로 우선순위가 Styled-component의 style이 되기 때문에 문제없이 스타일들을 적용시킬수 있다.

물론 사용하는 곳의 부모에 적용해도 되지만, 나중에 겹쳐서 여러번 쓰면 이상한 에러가 뜬다. 아직 이 에러가 뜨는 이유를 잘 모르겠다ㅠ 구글링을 해도 답이 안나온다

이런 에러가 뜬다~! 😫

끗~!😎