Material Ui 全局设置字体大小比例答案

【问题标题】：MaterialUi set fontSize ratio globallyMaterial Ui 全局设置字体大小比例
【发布时间】：2020-08-07 14:37:18
【问题描述】：

基于 Material 的 docs 和这个 answer 我一直在尝试在 html 标签上设置默认字体大小，因为我的应用程序使用 rem 并且集成它的容器使用默认值 1rem = 16px ，所以设计有点破。我的主题看起来像：

typography: {
    htmlFontSize: 10,
    ...
},
overrides: {
    MuiCssBaseline: {
      '@global': {
        html: {
          fontSize: '62.5%',
        },
    ...

我希望输出 css 包含类似 html{font-size:62.5%;} 的内容，但它当然不是这样，样式被搞砸了。我应该以不同的方式定位html吗？

【问题讨论】：

我认为你应该只使用一个 css 文件。 MUI 样式仅适用于组件
我无法访问集成组件的代码，我的目标是让它在没有所需设置的任何页面中工作。
您在使用CssBaseline 组件吗？请提供能重现您的问题的code sandbox。
创建一个CSS文件并导入

标签： css material-ui font-size

【解决方案1】：

我试过你的代码，它工作得很好。仔细检查您是否使用ThemeProvider 包装您的组件，并将您的theme 配置作为theme 属性传递，并且您正在使用<CssBaseline />。

const theme = createMuiTheme({
  typography: {
    htmlFontSize: 10
  },
  overrides: {
    MuiCssBaseline: {
      "@global": {
        html: {
          fontSize: "62.5%"
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </ThemeProvider>
  );
}

检查html 样式，我们可以看到font-size: 62.5%; 已设置。

【讨论】：