MUI主题无法作用于原生HTML元素，如何批量应用样式？

MaterialUI 默认仅对自身组件（如 <Typography>）应用主题样式，原生 HTML 元素不会自动继承主题配置。针对遗留系统无法批量替换组件的场景，有两种高效方案：

方案一：通过主题的 styleOverrides 全局覆盖原生元素 #

在自定义主题时，利用 typography.styleOverrides 直接为原生 HTML 标签绑定主题中的排版样式，这是最贴合 MaterialUI 主题系统的方式：

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

const myTheme = createTheme({
  typography: {
    // 你的自定义h1样式配置
    h1: {
      fontSize: '3rem',
      fontWeight: 700,
      color: '#1976d2',
      lineHeight: 1.2,
    },
    h2: {
      fontSize: '2.5rem',
      fontWeight: 600,
    },
    // 其他排版变体配置...

    // 为原生HTML元素绑定对应样式
    styleOverrides: {
      h1: ({ theme }) => theme.typography.h1,
      h2: ({ theme }) => theme.typography.h2,
      h3: ({ theme }) => theme.typography.h3,
      p: ({ theme }) => theme.typography.body1,
      // 按需添加其他需要覆盖的原生标签（如h4-h6、span等）
    },
  },
});

配置完成后，所有原生 <h1>、<p> 等元素会自动应用主题中对应的排版样式。

方案二：使用 GlobalStyles 组件注入全局样式 #

如果需要更灵活的样式控制（比如添加额外的原生元素样式），可以用 MaterialUI 提供的 GlobalStyles 组件全局注入 CSS 规则：

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

const myTheme = createTheme({
  typography: {
    h1: {
      fontSize: '3rem',
      fontWeight: 700,
      color: '#1976d2',
    },
    // 其他排版配置...
  },
});

// 定义全局样式规则
const GlobalCss = (
  <GlobalStyles styles={(theme) => ({
    h1: { ...theme.typography.h1, marginBottom: '1rem' }, // 可额外添加自定义样式
    h2: theme.typography.h2,
    p: theme.typography.body1,
    // 覆盖更多原生元素
  })} />
);

function App() {
  return (
    <ThemeProvider theme={myTheme}>
      {GlobalCss}
      {/* 应用内容 */}
      <h1>这是原生h1标签</h1>
      <p>这是原生p标签</p>
    </ThemeProvider>
  );
}

两种方案都能实现无需替换原生组件即可让主题样式生效的需求，可根据实际样式复杂度选择。

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