MUI v5自定义spacing后sx属性简写传值不生效如何解决

MUI v5 sx 属性对间距类属性（所有内外边距属性，如m/p/ml/pr等）的自动转换逻辑存在明确边界：

• 入参为数字类型时，会自动将数字传入theme.spacing()计算最终CSS值
• 入参为字符串类型时，默认不会触发theme.spacing()调用，会先匹配主题中注册的命名间距键，匹配失败则直接作为原生CSS值透传
  你当前实现的自定义spacing函数仅在**手动调用theme.spacing**时生效，没有将small/large这类字符串别名注册到主题的间距元数据中，因此简写写法下字符串会被直接透传，不会走转换逻辑。

不要仅在自定义spacing函数内做字符串映射，直接在主题实例上挂载命名间距属性即可，同时完全保留你原有的数字入参转px逻辑：

const theme = createTheme({
  // 配置基础间距换算因子为1，数字入参会直接输出 `${value}px`，和你原有数字处理逻辑完全一致
  spacing: 1,
});

// 注册自定义间距别名
theme.spacing.small = "12px";
theme.spacing.large = "24px";

如果使用TypeScript，需要补充模块类型定义消除类型报错：

declare module '@mui/material/styles' {
  interface Spacing {
    small: string;
    large: string;
  }
}

配置完成后两种写法均可正常工作：

• 回调调用写法：

<Box sx={{ ml: (theme) => theme.spacing('small') }} />

• 简写写法：

<Box sx={{ ml: 'small' }}></Box>

两种写法最终都会生成margin-left: 12px的正确样式。

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