MaterialUi全局设置fontSize比率

Question

基于Material的docs和此answer，我一直在尝试在html标签上设置默认字体大小，因为我的应用使用了rem及其集成容器使用默认值1rem = 16px，因此设计有点破损。 我的主题如下：

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

我希望输出的CSS包含类似html{font-size:62.5%;}的东西，但事实并非如此，样式自然是一团糟。我是否应该以其他方式定位html？

Answer 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%;已设置。