如何在Material UI v5中通过主题修改TextField等组件默认排版？

Material UI的输入组件（如TextField、Input等）并不支持通过defaultProps传入typographyProps来绑定排版变体，正确的做法是在主题的styleOverrides中直接复用主题内置的body2排版样式，这样所有输入组件都会自动应用该样式。

完整主题配置示例 #

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

const theme = createTheme({
  components: {
    // 覆盖基础输入组件根样式，所有基于InputBase的组件都会生效
    MuiInputBase: {
      styleOverrides: {
        root: ({ theme }) => ({
          // 直接复用body2的所有排版属性（字体大小、行高、字重等）
          ...theme.typography.body2,
          // 如需额外自定义样式，可在此添加
        }),
      },
    },
    // 可选：单独针对MuiInput组件覆盖（部分场景下可能需要）
    MuiInput: {
      styleOverrides: {
        root: ({ theme }) => ({
          ...theme.typography.body2,
        }),
      },
    },
    // 可选：如果需要统一输入框标签的排版，覆盖MuiFormLabel
    MuiFormLabel: {
      styleOverrides: {
        root: ({ theme }) => ({
          ...theme.typography.body2,
        }),
      },
    },
  },
});

export default theme;

说明 #

• 优先覆盖MuiInputBase，因为Material UI的所有输入类组件（TextField、OutlinedInput、FilledInput等）都基于InputBase开发，这样能一次性统一所有输入组件的排版。
• 通过...theme.typography.body2可以完全复用主题中body2变体的所有样式属性，包括字体大小、行高、字体系列、字重等，无需手动逐个设置。
• 如果需要对特定输入组件做差异化调整，可以单独在对应组件的styleOverrides中补充样式。

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