修改Material UI v5默认字体时出现ThemeProvider TypeScript错误

架构老林

2026-8-18

解决Material UI字体替换及ThemeProvider类型错误问题

1. 先搞定ThemeProvider的类型错误

这个错误和webpack半毛钱关系都没有，纯粹是ThemeProvider导入错了。

正确的导入方式：
在app.js里，从正确的路径导入ThemeProvider：

import { ThemeProvider } from '@mui/material/styles';
// 或者也可以这么导，效果一样
// import ThemeProvider from '@mui/material/ThemeProvider';

要是之前你误导入了类型（比如写了import type { ThemeProvider } from ...），就会触发这个TS错误——类型不能当组件用，自然没法实例化。

2. 优化Roboto Condensed字体配置

你现在的theme配置有点冗余，还可能导致字体不生效，改一下：

步骤1：保留已做的正确操作

之前执行的npm install @fontsource/roboto-condensed没问题，在app.js顶部导入字体包：

import '@fontsource/roboto-condensed'; // 这个包会自动帮你注入@font-face规则，不用自己写

步骤2：修改theme.ts文件

删掉MuiCssBaseline里多余的@font-face配置，然后把fontFamily写得更稳妥点：

import { createTheme, Theme } from "@mui/material/styles";

const theme: Theme = createTheme({
  typography: {
    fontFamily: '"Roboto Condensed", sans-serif', // 加引号和后备字体，避免特殊字符问题
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          fontSize: "3rem",
          color: "purple",
        },
      },
    },
  },
});
export default theme;

步骤3：确认ThemeProvider的使用

确保app.js里正确导入theme和ThemeProvider，然后包裹根组件：

import { ThemeProvider } from '@mui/material/styles';
import theme from './theme'; // 换成你实际的theme.ts路径

// ...其他代码

render(
  <ThemeProvider theme={theme}>
    {/* 你的根组件内容 */}
  </ThemeProvider>
);