TypeScript Next.js项目MUI添加自定义Typography变体失效求助

按以下步骤依次排查修改：

1. 确认主题已注入根应用 #

Next.js项目需要在_pages/_app.tsx中使用ThemeProvider包裹整个应用，否则自定义主题不会生效，参考代码：

import type { AppProps } from 'next/app'
import { ThemeProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'
import { theme } from './muiThemeOveride' // 路径替换为你自己的配置文件路径

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

2. 适配自定义变体的响应式处理 #

responsiveFontSizes默认仅处理MUI内置的Typography变体，自定义的h7需要手动加入配置的variants数组中，修改muiThemeOveride.ts的主题导出代码：

export const theme = responsiveFontSizes(createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        outlined: {
          borderColor: '#000', // 这里替换为你实际的黑色值，或者提前定义black变量
          color: '#000',
          '&:hover': {
            borderColor: '#000',
          }
        }
      },
    },
  },
  typography
}), {
  // 把自定义的h7加入响应式处理列表
  variants: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7']
})

3. 修复变量未定义问题 #

你当前配置中使用的black变量未定义，会导致主题创建失败，连带Typography配置失效，要么直接写颜色值#000，要么在文件顶部提前定义const black = '#000000'。

4. 确认自定义字体已引入 #

如果使用的Recoleta、Fira Sans是外部非系统字体，需要在全局样式或者项目入口的Head中引入对应的字体资源，否则字体会回退为系统默认，看起来像是样式未生效。

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