MUI 5中如何获取不带px后缀的主题间距单位值

MUI 5 确实移除了旧版本的theme.spacing.unit属性，要拿到不带单位后缀的基础间距值，用下面的公开API方案最稳妥，全MUI5版本兼容：

• 直接解析theme.spacing(1)的返回值即可。MUI5中调用theme.spacing(n)会返回n倍基础间距拼接单位后的字符串，传入参数1时得到的就是1倍基础间距带单位的结果，用parseFloat解析就能拿到纯数值：

// 默认配置下解析得到数字8，和旧版theme.spacing.unit返回值完全一致
const spacingUnit = parseFloat(theme.spacing(1))

这个方案不受自定义配置影响：

• 如果你把基础间距改成4，theme.spacing(1)返回4px，解析后得到4
• 如果你把间距单位改成rem（比如配置1倍间距为0.5rem），parseFloat也能正确解析出0.5的数值
• 不需要依赖任何框架内部未公开的私有属性，不会因为版本迭代失效

使用示例 #

在函数组件里配合useTheme调用：

import { useTheme } from '@mui/material/styles';

function CustomBox() {
  const theme = useTheme();
  const spacingUnit = parseFloat(theme.spacing(1));
  // 做数值计算，比如计算非整数倍的间距、做和间距相关的逻辑判断
  const doubleGap = spacingUnit * 2;

  return <div style={{ padding: doubleGap }} />
}

如果你是在创建主题的环节自定义了间距值，可以直接把基础间距抽成全局常量复用，不需要额外解析：

// 抽成全局常量
export const BASE_SPACING = 8;
const theme = createTheme({
  spacing: BASE_SPACING,
  // 其余主题配置
})
// 业务代码里直接导入BASE_SPACING就能拿到无单位的基础间距值

避坑提示：不要尝试读取主题对象上下划线开头的内部私有属性拿间距值，这类属性不属于官方公开的API范围，小版本更新时随时可能被修改、删除，会直接导致代码报错。

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