[React] MUI 컴포넌트에 CSS Module 적용하기 (MUI css 적용안될 때)

프로젝트를 진행하던중 Button에 css를 적용하려고 다음과 같이 코드를 짰더니 컴포넌트 자체 스타일이 나중에 적용되어 원하는대로 작동하지 않았다.

import styles from '../style/Header.module.css';
import Button from '@mui/material/Button';

<Button className={styles.buttonContent} LinkComponent={Link} to={Links[i].to}>버튼</Button>

 

 

 

먼저 시도해본 방법은 @mui/styles에서 제공하는 StylesProvider를 사용하는 것이었는데 여전히 해결되지 않아 공식 문서를 찾아보니 React.StrictMode와 React 18이상부터는 호환이 되지 않는다.

import React from 'react';
import ReactDOM from 'react-dom';
import store from './app/store';
import {Provider} from 'react-redux';
import App from './App';
import {StylesProvider} from '@mui/styles';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <StylesProvider injectFirst>
        <App />
      </StylesProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

 

 

다행히 @mui/styled-engine에서 같은 기능을 제공하는 StyledEngineProvider가 있었다.

페이지 전체에 적용하려면 아래와 같이 index.js 파일을 수정하고 개별 컴포넌트에만 적용하려면 해당 컴포넌트를 StyledEngineProvider로 감싸주면 된다.

import React from 'react';
import ReactDOM from 'react-dom';
import store from './app/store';
import {Provider} from 'react-redux';
import App from './App';
import {StyledEngineProvider} from '@mui/styled-engine';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <StyledEngineProvider injectFirst>
        <App />
      </StyledEngineProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

 

다음과 같이 잘 적용되는 것을 볼 수 있다.

 

 

Version

react 17.0.0

@mui/styled-engine 5.14.18

@mui/material 5.14.10

 

Reference

javascript - material ui 'new' v5.0.0 injectFirst fails to set specificity - Stack Overflow