如何全局设置Material UI的TextField为small尺寸且默认满宽度

MUI v5 实现方式 #

• 通过createTheme定义全局主题，在components字段中配置MuiTextField的默认属性：

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

const customTheme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        size: 'small',
        fullWidth: true
      }
    }
  }
});

• 在项目根组件外层包裹ThemeProvider并传入自定义主题，全局所有TextField都会默认生效配置：

function RootApp() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 项目其他业务代码 */}
      {/* 以下组件自动携带size="small" 和 fullWidth 属性 */}
      <TextField label="用户名" />
    </ThemeProvider>
  );
}

MUI v4 实现方式 #

• 配置逻辑和v5一致，仅主题结构写法稍有差异：

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

const customTheme = createMuiTheme({
  props: {
    MuiTextField: {
      size: 'small',
      fullWidth: true
    }
  }
});

注意事项 #

• 局部组件如果需要覆盖全局默认配置，直接在TextField上声明对应属性即可，局部属性优先级更高：

// 该组件会覆盖全局size配置，使用medium尺寸，fullWidth仍保留全局默认值
<TextField label="特殊输入框" size="medium" />

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