theme.spacing() 是如何运作的？

Posted 2023-02-22

【中文标题】theme.spacing() 是如何运作的？

【英文标题】：how theme.spacing() is functioning?

【发布时间】：2020-09-05 05:44:20

【问题描述】：

根据 material-ui 中的文档，它在组件之间提供空间。但我可以在这里得到高度和宽度的方式：

width: theme.spacing(20),
height: theme.spacing(15)

theme.spacing()这里是如何设置宽高的？

【参考方案1】：

const theme = createMuiTheme(
  spacing: 8,
);

当你的主题被定义时，你有一个间距值。默认情况下，此值为8px。因此，当您调用theme.spacing(20) 时，如果spacing value 是8，它会简单地返回20 * 8 => 160px。

来源：https://material-ui.com/customization/spacing/

【讨论】：

默认值为8，而不是8px。 theme.spacing(20) 返回数字 160，而不是字符串 160px。那么，我们打算如何将这些数值应用于组件？

@stone Material UI 将数字转换为像素值，例如8 将变为 8px。