React项目中如何更新Material-UI主题修改三类组件标签字号？

核心思路 #

Material-UI v5的主题系统支持通过createTheme全局自定义组件样式，针对你提到的三类组件，只需定位它们标签/文本对应的组件样式路径，就能在主题中统一覆盖配置。

步骤1：搭建主题基础结构 #

先确保项目已导入createTheme和ThemeProvider，然后创建自定义主题并包裹整个应用：

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

const theme = createTheme({
  // 后续添加自定义配置
});

function Root() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

export default Root;

步骤2：修改TextField的标签字号 #

TextField的标签由MuiInputLabel组件控制，包括默认状态和聚焦后的收缩状态，直接在主题中覆盖其样式：

const theme = createTheme({
  components: {
    MuiInputLabel: {
      styleOverrides: {
        // 默认状态的标签
        root: {
          fontSize: '1rem', // 自定义字号，如16px
        },
        // 聚焦/填充后的收缩标签
        shrink: {
          fontSize: '0.875rem', // 自定义收缩后的字号，如14px
        },
      },
    },
  },
});

步骤3：修改Menu下拉菜单的选项文本 #

Menu中的选项由MuiMenuItem组件渲染，修改它的根样式即可调整选项字号：

const theme = createTheme({
  components: {
    // ... 保留其他组件配置
    MuiMenuItem: {
      styleOverrides: {
        root: {
          fontSize: '0.9375rem', // 自定义选项字号，如15px
        },
      },
    },
  },
});

步骤4：修改Autocomplete的标签 #

Autocomplete包含两类标签：输入框上方的标签（和TextField共享MuiInputLabel），以及下拉选项文本。针对下拉选项，需要修改MuiAutocomplete的option样式：

const theme = createTheme({
  components: {
    // ... 保留其他组件配置
    MuiAutocomplete: {
      styleOverrides: {
        // 下拉选项的文本
        option: {
          fontSize: '0.9375rem', // 自定义选项字号
        },
      },
    },
  },
});

完整整合示例 #

把所有配置合并后的最终主题代码：

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

const theme = createTheme({
  components: {
    // TextField标签
    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontSize: '1rem',
        },
        shrink: {
          fontSize: '0.875rem',
        },
      },
    },
    // Menu下拉选项
    MuiMenuItem: {
      styleOverrides: {
        root: {
          fontSize: '0.9375rem',
        },
      },
    },
    // Autocomplete下拉选项
    MuiAutocomplete: {
      styleOverrides: {
        option: {
          fontSize: '0.9375rem',
        },
      },
    },
  },
});

function Root() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

export default Root;

注意事项 #

• 若使用Material-UI v4，语法会略有差异（比如用createMuiTheme而非createTheme），但核心逻辑一致。
• 推荐使用rem单位，保证字号的响应式适配。

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