如何“缩放”Material-UI 中的所有元素？

Question

我正在开发一个应用程序，有些事情让我发疯。在库页面（https://material-ui.com/components/buttons/#button）上，所有组件都以良好的尺寸呈现。

但在我的应用程序中，没有设置任何东西，一切都很小。大约一半大小：

我现在花了 2 天的时间尝试正确渲染，更改 fontSize 或使用 MUI 覆盖属性，但它有很多附带效果，例如填充或轮廓超出比例。

有没有办法对 MUI 说：“好吧。我希望所有东西都加倍大小。填充、字体大小、效果等......”

多谢

Answer 1

Material-UI 使用 rem 单位作为字体大小，而 rem 单位相对于网页根元素的字体大小。

因此，如果您可以更改网页根元素的字体大小，则所有 Material UI 组件都会随之更改，“放大”或“缩小”，具体取决于值的变化。

浏览器 html 元素的默认字体大小是 16px。因此，如果您将其从 16px 更改为 24px，则所有 Material UI 组件也将放大 50%，如下所示（在您的根 css 中）：

html {
  font-size: 24px;
}

或者您可以更改 Material-UI 的字体大小，提供 fontSize 属性（默认值为 14px），如下所示：

const theme = createMuiTheme({
  typography: {
    fontSize: 12,
  },
});

更多信息请参见 Material UI 文档：

Material-UI 使用 rem 单位作为字体大小。浏览器元素默认字体大小为 16px，但浏览器可以选择更改此值，因此 rem 单位允许我们适应用户的设置，从而获得更好的可访问性支持。用户出于各种原因更改字体大小设置，从视力不佳到为尺寸和观看距离差异很大的设备选择最佳设置。

要更改 Material-UI 的字体大小，您可以提供 fontSize 属性。默认值为 14 像素。

字体来源： https: //material-ui.com/customization/typography/#font-size