使用“babel-plugin-import”时出现 CRACO 应用程序问题：“无法解析“app/src/Component”中的“@mui/material/ThemeProvider””

Question

我正在尝试最小化我的包大小，特别是“@mui/material”包。我正在使用他们的指南：https://mui.com/material-ui/guides/minimizing-bundle-size/。

但是，在我的 CRACO 应用程序中完成所有步骤后，我在运行时收到以下错误

npm start

：

编译失败。

找不到模块：错误：无法解析“/src/Component”中的“@mui/material/ThemeProvider”

我在这里重现了错误https://codesandbox.io/p/devbox/282r7g（您可能需要转到“开发”选项卡才能看到它）。

有人知道为什么会发生这种情况吗？

Answer 1

您需要从

ThemeProvider

而不是

styled

导入

@mui/material/styles

和

@mui/material

。

在您的 App.tsx 中，您需要替换这些行：

import { ThemeProvider, StyledEngineProvider } from "@mui/material";

与这些：

import { StyledEngineProvider } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";

同样，在您的 Component.tsx 中，您需要替换这些行：

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

与这些：

import { Box } from "@mui/material";
import { styled } from '@mui/material/styles';

您可以查看这个分叉沙箱，了解示例代码的实时工作示例。