如何统一设置Material UI所有组件尺寸？spacing设置疑问

一、批量设置组件默认尺寸的方法 #

Material UI没有原生的全局一键开关来给所有组件设置尺寸，但可以通过遍历组件列表批量生成配置的方式，避免手动逐个编写defaultProps：

// 先列出所有需要统一设置size的组件（按需添加）
const targetComponents = [
  'MuiButton',
  'MuiButtonGroup',
  'MuiTextField',
  'MuiSelect',
  'MuiOutlinedInput',
  'MuiCheckbox',
];

// 批量生成components配置项
const componentsConfig = targetComponents.reduce((config, componentName) => {
  config[componentName] = {
    defaultProps: { size: 'small' }
  };
  return config;
}, {});

// 创建主题时传入批量配置
const theme = createTheme({
  components: componentsConfig,
  // 其他主题配置...
});

注意：不是所有组件都支持size属性，需要根据实际使用的组件列表筛选，避免给不支持的组件添加无效配置。

二、spacing设置后输入组件内边距未变化的原因 #

Material UI输入组件（如TextField、OutlinedInput）的内边距默认和theme.spacing无关，是组件样式规则里的固定值。比如小尺寸OutlinedInput的默认内边距8.5px 14px是硬编码在组件样式中的，不会自动继承你设置的spacing:4。

如果要让内边距和spacing关联，需要手动覆盖组件的样式：

const theme = createTheme({
  spacing: 4,
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        sizeSmall: {
          // 用spacing倍数计算内边距，对应原默认值的话：8.5px = 4*2.125，14px=4*3.5
          padding: `${theme.spacing(2.125)} ${theme.spacing(3.5)}`,
          // 也可以改成你想要的自定义倍数，比如spacing(2) spacing(3)
        }
      }
    },
    // 若使用TextField，可能还需要调整InputLabel的位置避免错位
    MuiInputLabel: {
      styleOverrides: {
        sizeSmall: {
          transform: `translate(${theme.spacing(1)}, ${theme.spacing(1.5)}) scale(0.75)`,
        }
      }
    }
  }
});

简单来说，输入组件的内边距是独立的样式规则，和全局spacing不挂钩，想要统一关联就需要手动覆盖。

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