Material UI에서 사용자 정의 스타일을 적용하지 않는 문제

Material UI에서 CSS Modules의 사용자 정의 스타일을 사용할 때 일부 스타일이 적용되지 않는 문제가 발생했습니다.
정확히 말하면, 사용자 정의 스타일을 덮어쓴 상태가 무엇입니까?
자세히 조사한 결과 사용자 정의 스타일이 Material UI의 기본 스타일로 무시됩니다.
Material UI에서 CSS의 inject 순서에 따라 Material UI의 스타일은 사용자 정의 스타일보다 우선할 수 있으며, 항상 사용자 정의 스타일을 우선시하면 inject의 순서를 명시해야 할 것 같습니다.
https://mui.com/material-ui/guides/interoperability/#css-injection-order
이렇게 하면 StyledEngineProvider로 랩을 싸고 injectFirst까지 사용자 정의 스타일을 우선적으로 선택할 수 있다.
import * as React from 'react';
import { StyledEngineProvider } from '@mui/material/styles';

export default function GlobalCssPriority() {
  return (
    <StyledEngineProvider injectFirst>
      {/* Your component tree. Now you can override MUI's styles. */}
    </StyledEngineProvider>
  );
}

좋은 웹페이지 즐겨찾기