如何在 MUI 5 中获取主题间距单位？

Question

在过去版本的 MUI 中，可以通过

theme.spacing.unit

获取主题间距单位，默认值会输出

8

，但该属性已在 MUI 5 中删除。我找不到文档来访问主题间距单位。我如何获得该值（没有

px

）？

Answer 1

看起来

theme.spacing.unit

它与

v3

相关，并且它已在版本 4 中被弃用，如您在此处所见。

对于 v5（和 v4），MUI 默认使用推荐的 8px 缩放因子，您可以通过

theme.spacing(1)

获取单位。

样品间距：

const theme = createTheme();

theme.spacing(2); // `${8 * 2}px` = '16px'

// OR

const theme = createTheme({
  spacing: 4,
});

theme.spacing(2); // `${4 * 2}px` = '8px'

您可以在 v5 中查看更多相关信息这里。

Answer 2

使用

sx

属性时，主题间距单位会自动转换。
https://mui.com/system/getting-started/the-sx-prop/#spacing

<Grid sx={{ paddingLeft: 1 }}>

相当于

const StyledGrid = styled(Grid)(({ theme }) => ({
  paddingLeft: theme.spacing(1)
}))