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

webghufk  于 2022-12-08  发布在  Babel
关注(0)|答案(1)|浏览(160)
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"]
            }
          }
        }
      }
    ]
  ]
};

但它抛出以下错误

z2acfund

z2acfund1#

你有没有试过

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

import styled from "@emotion/styled";

代替

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

相关问题