Question

我已经意识到Material-ui主题的默认间距是8px。 theme.spacing(1)等于8px。 theme.spacing(2)等于16px，依此类推。我知道间距以一种覆盖方式工作，因此可以编写<Box m={4} />或theme = {spacing: 4}。但是，我有兴趣知道默认情况下间距为8px的定义位置。

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

Answer 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
}

Answer 2

在哪里定义？

代码中的某个地方，但是我不确定是否指出代码中的哪个地方有什么区别，也许您想知道...

为什么是8像素？

这是Material's Design

的标准

如何更改？

您可以in the docs看到它。

默认材质UI间距在哪里定义？

2 个答案: