reactjstypescriptmaterial-uibabeljsemotion

Can't use Component Selectors with MUI v5 Emotion Library

import { Box, styled } from "@mui/material"
import { Body1 } from "elements/Typography"
export const ItemHeader = styled(Box)`
  display: flex;
  flex-direction: column;
  gap: 1em;

  ${Body1} {
    span {
      margin-left: 0.5em;
      font-weight: 500;
      color: ${({ theme }) => theme.palette.error.main};
    }
  }
`

I am Creating an mui emotion component with Component selectors, I already have setup babel.config.js and installed @emotion/babel-plugin

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"]
            }
          }
        }
      }
    ]
  ]
};

But it is throwing the following error

1

Solution

  • have you tried to

    import styled from "@emotion/styled/macro";

    or

    import styled from "@emotion/styled";

    instead of

    import {styled } from "@mui/material";