reactjs - Kann Komponentenselektoren mit MUI v5 Emotion-Bibliothek nicht verwenden

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

Ich erstelle eine MUI-Emotion-Komponente mit Komponenten-Selektoren, ich habe bereits babel.config.js eingerichtet und @emotion/babel-plugin installiert

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

Aber es wirft den folgenden Fehler

Antwort #1

hast du versucht zu

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

oder

import styled from "@emotion/styled";

statt

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

Antwort #2

Ich bin auf dasselbe Problem gestoßen und weiß nicht, wie geeignet diese Lösung ist.

Ich habe 'emotion' zu 'styled-components' geändert und kann beim Schreiben von Styles auch die Theme-Prop verwenden, und der Komponenten-Selector funktioniert. Für mich habe ich keine Änderungen bemerkt.

Aber Sie sollten es nicht verwenden, wenn Sie SSR verwenden.

https://mui.com/material-ui/integrations/styled-components/