[22-07-28 TIL] Material UI CSS injection

1. 문제

최근 material ui를 상속받아 styled component를 만들었다.
특정 루트로 돌아다닐때마다 내가 작성한 CSS가 적용되지 않고 기본 material ui CSS가 적용되는 현상이 발생했다.
내가 작성한 CSS가 먼저 적용되고 그다음에 material CSS가 적용되고있었다.
새로고침하면 정상으로 보여졌다.

2. 해결방법

방법1) StyledProvider injectFirst props 사용 (버전 업그레이드)

@material/ui/core 버전: 3.9.1 → 4.12.4로 변경
@material-ui/styles 버전: 3.0.0-alpha.10 → 4.11.5로 변경

StylesProvider에 injectFirst props를 작성하고 App을 감쌌다.

import { StylesProvider } from '@material-ui/styles';
import App from './App';

const AppWrapper = () => {
  return <StylesProvider injectFirst><App /></StylesProvider>

}

방법2) JssProvider 사용 (버전 업그레이드X)

mui/material-ui 에서 'creat-react-app-with-jss'를 찾았다.
react-jss 설치 후 파일을 추가했다.

• withRoot.js

  import React from 'react';
  import { create } from 'jss';
  import JssProvider from 'react-jss/lib/JssProvider';
  import { MuiThemeProvider, jssPreset } from '@material-ui/core/styles';
  import CssBaseline from '@material-ui/core/CssBaseline';
  
  // Create a JSS instance with the default preset of plugins.
  // It's optional.
  const jss = create(jssPreset());
  
  function withRoot(Component) {
    function WithRoot(props) {
      // JssProvider allows customizing the JSS styling solution.
      return (
        <JssProvider jss={jss} >
          {/* MuiThemeProvider makes the theme available down the React tree
            thanks to React context. */}
          <MuiThemeProvider >
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline />
            <Component {...props} />
          </MuiThemeProvider>
        </JssProvider>
      );
    }
  
    return WithRoot;
  }
  
  export default withRoot;

• 사용

  import App from './App';
  import withRoot from './withRoot';
  
  const AppWrapper = () => {
    return <App />;
  };
  
  export default withRoot(AppWrapper);