材料-UI-理解10 UI简化

Question

我不明白为什么我们需要这样做来简化10‘t：

html {
   font-size: 62.5%; /* 62.5% of 16px = 10px */
}

它不应该由下面的代码来完成所有的工作？

const theme = createMuiTheme({
  typography: {
    // Tell Material-UI what's the font-size on the html element is.
    htmlFontSize: 10,
  },
});

提前谢谢你。

Answer 1

主题中的htmlFontSize属性typography不控制html元素的字体大小；它只是告诉Material您在其上使用的大小。Material然后使用这个大小来控制它在确定所有不同字体变体的字体大小时是如何将px单位转换为rem单位的。

Answer 2

您可以修改CSS基。

export const theme = createMuiTheme({
    overrides: {
    MuiCssBaseline: {
      '@global': {
        html: {
          fontSize: '62.5%'
        }
      }
    }
  }})

Answer 3

在v5中，它应该是这样的：

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        html: {
          fontSize: '62.5%',
        }
      }
    }
  }
})