css - Material Ui 全局设置字体大小比例

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 prop 并且您正在使用 <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%;已设置。