默认的material-ui间距在哪里定义？答案

【问题标题】：Where is defined the default material-ui spacing?默认的material-ui间距在哪里定义？
【发布时间】：2020-09-30 00:07:32
【问题描述】：

我已经意识到 material-ui 主题的默认间距是 8px。 theme.spacing(1) 等于 8px。 theme.spacing(2) 等于 16px，以此类推。我知道间距以一种压倒一切的方式起作用，所以可以写<Box m={4} /> 或theme = {spacing: 4}。但是，我很想知道默认情况下间距是 8px 是在哪里定义的。

注意： DefaultTheme这里的默认主题没有定义间距，我在material-ui repo中也找不到它

【问题讨论】：

标签： reactjs material-ui material-design themes

【解决方案1】：

Default theme 将间距定义为createSpacing 函数的结果：

function createMuiTheme(options = {}) {
  const {
    // ...
    spacing: spacingInput,
    // ...
  } = options;

  // ...
  const spacing = createSpacing(spacingInput);
  // ...
}

Here 是createSpacing 函数的定义。

export default function createSpacing(spacingInput = 8) {
  // ...
  const spacing = (...args) => {
  // ...
  }
  // ...
  return spacing
}

【讨论】：

【解决方案2】：

它是在哪里定义的？

代码中的某处，但我不确定指出代码中的哪个位置是否有任何区别，也许您想知道...

为什么是 8px？

这是Material's Design的标准

怎么改？

你可以看到in the docs。

【讨论】：

了解材料设计规范真的很有趣，谢谢