reactjs - 如何 "scale"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 uses rem units for the font size. The browser element default font size is 16px, but browsers have an option to change this value, so rem units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.

To change the font-size of Material-UI you can provide a fontSize property. The default value is 14px.

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