Material-UI（React）Typography主题字体失效，求全局修改最优方案

问题描述 #

我在多个Material-UI（MUI）项目中反复遇到Typography主题字体不生效的问题，目前该问题已影响更多场景。为复现问题，我通过npx create-next-app@latest --tailwind创建了一个简单的Next.js项目，操作步骤如下：

1. 在mui/theme.js中配置主题调色板和Typography字体族：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
    palette: {
        primary: {
            main: '#020203',
        },
        secondary: {
            main: '#60606e',
        },
    },
    typography: {
        fontFamily: [
            'Montserrat',
            'sans-serif',
        ].join(','),
      },
    
});

export default theme;

2. 在layout.js中通过MUI的Theme Provider应用主题（已确认调色板等其他主题属性正常生效）：

'use client'
import './globals.css'
import { Montserrat } from 'next/font/google';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '../../mui/theme';
import { AppBar, Box, Button, Toolbar, Typography } from '@mui/material';


const montserrat = Montserrat({ subsets: ['latin'], weight: ['100', '300', '400', '500', '700'] })

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={montserrat.className}>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <div>
        <Box sx={{ flexGrow: 1 }}>
            <AppBar position="static">
              <Toolbar>
                <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                  eStore
                </Typography>
                <Button color="inherit">Login</Button>
              </Toolbar>
            </AppBar>
          </Box>
        </div>

          {children}
      </ThemeProvider>
      </body>
    </html>
  )
}

3. 首页测试代码：

'use client'
import { Button, Typography } from '@mui/material'

export default function Home() {
  return (
    <div>
      
      <div class="mt-5">
        Hello in Montserrat from div
      </div>

      <Typography>
        Hello NOT in Montserrat from Typography
      </Typography>

      <Button variant="outlined">
        Hello NOT in Montserrat from Button
      </Button>

    </div>
    )
}

测试结果：通过Next.js在body上设置的Montserrat字体对普通div生效，但MUI的Typography、Button等组件既不应用主题中配置的字体族，也不继承body的字体。请问全局修改Material-UI字体族的最佳方案是什么？

最佳解决方案 #

问题根源在于Next.js的next/font/google生成的CSS类优先级较高，且MUI组件默认会覆盖继承的字体样式，同时主题配置中没有正确关联Next.js加载的字体变量。以下是两种可靠的全局修改方案：

方案一：将Next.js字体变量注入MUI主题 #

Next.js的Google Fonts加载器会自动生成字体变量（如--font-montserrat），直接在MUI主题中引用该变量，确保字体样式优先级匹配：

修改mui/theme.js：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#020203',
    },
    secondary: {
      main: '#60606e',
    },
  },
  typography: {
    // 直接引用Next.js生成的字体变量
    fontFamily: 'var(--font-montserrat), sans-serif',
  },
});

export default theme;

方案二：全局覆盖MUI组件的字体样式 #

如果方案一不生效，可通过MUI主题的components字段，直接覆盖所有文本类组件的字体样式：

修改mui/theme.js：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#020203',
    },
    secondary: {
      main: '#60606e',
    },
  },
  typography: {
    fontFamily: 'Montserrat, sans-serif',
  },
  components: {
    MuiTypography: {
      styleOverrides: {
        root: {
          fontFamily: 'inherit',
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          fontFamily: 'inherit',
        },
      },
    },
    // 按需添加其他需要覆盖的组件，如输入框、链接等
    MuiInputBase: {
      styleOverrides: {
        root: {
          fontFamily: 'inherit',
        },
      },
    },
  },
});

export default theme;

额外注意事项 #

• 确保layout.js中ThemeProvider的包裹范围正确（当前代码已满足要求）；
• 无需移除CssBaseline，它不会干扰字体配置，反而能统一基础样式；
• 确认Next.js字体加载参数（子集、权重）正确，保证字体文件正常加载。

内容的提问来源于stack exchange，提问作者Thiago S. Brasil