MUI component에서 styled 사용하기

'@mui/styles'는 deprecate

'@mui/styles'는 deprecate 됐기 떄문에 더이상 사용하지 않는 것을 권한다.

 

import { styled } from '@mui/styles';

'@mui/system'

대신에 '@mui/system'를 사용하는 것을 권장한다. styled component child selector 옵션을 사용하기 위해서 필요하다.

 

import { styled } from '@mui/system';

babel config 필수

변경된 메소드를 사용하기 위해서 바벨 플러그인 설치가 필수
@emotion/babel-plugin를 설치해준다.

 

npm install @emotion/babel-plugin

 

babel.config.js

module.exports = {
  ...
  plugins: [
    [
      "@emotion",
      {
        importMap: {
          "@mui/system": {
            styled: {
              canonicalImport: ["@emotion/styled", "default"],
              styledBaseImport: ["@mui/system", "styled"]
            }
          },
          "@mui/material/styles": {
            styled: {
              canonicalImport: ["@emotion/styled", "default"],
              styledBaseImport: ["@mui/material/styles", "styled"]
            }
          }
        }
      }
    ]
  ]
};

참고

https://mui.com/system/styles/basics/

https://mui.com/system/styled/