Material-UI

Question

我不明白为什么我们需要为 10px 的简化做这个：

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

主题中 typography 的 htmlFontSize 属性 不控制 html 元素的字体大小;它只是告诉 Material-UI 你在上面使用的尺寸。 Material-UI 然后使用该大小来控制它 converts px units to rem units 在确定所有不同排版变体的字体大小时的方式。

Answer 2

您可以修改 CSS 基础。

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

Material-UI - 理解 10px 简化

Material-UI - understanding 10px simplification

css

reactjs

themes

font-size