MUI v5中如何全局修改TextField字体大小？解决InputProps覆盖失效问题

问题核心是通过defaultProps设置的全局InputProps会被组件局部传入的InputProps完全覆盖，无法合并样式。要实现深度全局覆盖，需要通过主题的overrides直接修改底层输入组件的CSS样式，而非依赖props传递：

方法一：全局覆盖输入组件的基础样式 #

针对不同类型的TextField（基础、Outlined、Filled），直接修改对应的Material-UI组件样式：

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

const theme = createTheme({
  overrides: {
    // 覆盖基础Input组件的根样式
    MuiInput: {
      root: {
        fontSize: '0.8rem',
      },
    },
    // 覆盖Outlined类型TextField的输入框样式
    MuiOutlinedInput: {
      input: {
        fontSize: '0.8rem',
      },
    },
    // 覆盖Filled类型TextField的输入框样式
    MuiFilledInput: {
      input: {
        fontSize: '0.8rem',
      },
    },
  },
});

// 在应用根组件外层包裹ThemeProvider
function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的应用内容 */}
    </ThemeProvider>
  );
}

方法二：通过Typography自定义全局字体变体 #

如果需要统一管理字体样式，可以自定义Typography变体，再全局绑定到TextField：

const theme = createTheme({
  typography: {
    customTextField: {
      fontSize: '0.8rem',
    },
  },
  overrides: {
    MuiTextField: {
      root: {
        '& .MuiInputBase-input': {
          fontSize: theme.typography.customTextField.fontSize,
        },
      },
    },
  },
});

这种方式的优势是：不管组件是否局部重写InputProps，CSS层级的样式都会优先生效（除非局部用style属性强制覆盖，但这属于特殊场景）。

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