MUI v5中使用theme.spacing()进行间距数值运算的正确方法

最优方案（推荐） #

直接使用CSS calc() 拼接运算表达式，无需处理类型转换，也兼容所有自定义spacing配置（包括自定义单位如rem的场景）：

paddingTop: `calc(${theme.mixins.toolbar.minHeight}px + ${theme.spacing(1)})`

需提取纯数值运算的方案 #

如果需要拿到spacing对应的纯数值做其他逻辑处理，可以提取返回字符串的数字部分再运算：

// 提取1倍spacing的数值（默认返回px结尾的字符串）
const spacingValue = Number(theme.spacing(1).slice(0, -2));
paddingTop: theme.mixins.toolbar.minHeight + spacingValue

注意：如果自定义过spacing的返回单位，需要对应调整字符串截取/替换的逻辑，该场景下仍优先推荐calc方案。

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