MaterialUI自定义主题字体不生效，Typography组件未继承主题样式

你当前的核心问题是混用了Material UI的两个大版本依赖：

• App组件中使用的createTheme、ThemeProvider来自v4版本的@material-ui/core包
• Text组件中使用的Typography来自v5版本的@mui/material包
  两个版本的主题上下文完全独立，v5的组件无法读取v4版本ThemeProvider下发的主题配置，因此Typography的字体样式不生效，未使用Typography的其他组件不受影响。

你可以任选以下两种方案之一，将项目依赖统一为同一个版本即可：

方案1：统一升级为v5版本（更推荐） #

修改App组件的导入语句，将v4版本的主题相关导入替换为v5版本：

// 替换前
// import { createTheme, ThemeProvider } from "@material-ui/core";
// 替换后
import { createTheme, ThemeProvider } from "@mui/material/styles";

如果项目中还有其他来自@material-ui前缀包的导入，统一替换为@mui前缀下的对应导出即可。

方案2：统一降级为v4版本 #

修改Text组件的Typography导入语句，替换为v4版本的导出：

// 替换前
// import { Typography } from "@mui/material";
// 替换后
import { Typography } from "@material-ui/core";

如果修改后字体仍然不生效，请确认你已经在项目中正确引入了自定义字体资源：

• 可以在HTML的head标签中添加字体CDN链接
• 也可以在全局CSS中通过@font-face声明字体资源路径

内容的提问来源于stack exchange，提问作者Stjepan Suton