无法将组件选择器与 MUI v5 情感库一起使用

Question

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};
    }
  }
`

我正在使用组件选择器创建一个 mui 情感组件，我已经设置了 babel.config.js并安装了 @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"]
            }
          }
        }
      }
    ]
  ]
};

但它抛出以下错误

Answer 1

你试过了吗

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

或者

import styled from "@emotion/styled";

代替

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