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

Question

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

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

Answer 1

Where it's defined?

代码中的某个地方，但我不确定指出代码中的某个地方是否有任何不同，也许您想知道...

Why it's 8px?

这是Material's Design

的标准

How to change it?

可以看到in the docs.

Answer 2

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
}

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

Where is defined the default material-ui spacing?

themes

reactjs

material-design

material-ui