reactjs - Material UI 中的响应式排版？

Question

针对移动设计，设计通常具有较小的标题字体。

Material UI 是否有使版式响应的机制？

我看到默认主题的字体大小是在 rems 中定义的 - 这是否意味着只需减小基本字体大小即可？ (这似乎不起作用，如果你想以不同的速率减少标题字体怎么办)。

Answer 1

更新

MUI v4 内置了响应式排版!检查here了解详情。

旧回复

@Luke的answer是很棒的。我想添加一些细节以使这项工作在实践中发挥作用，因为 断点 和 pxToRem 都可以在主题对象上访问......使得这成为一个先有鸡还是先有蛋的问题!我的做法:

import { createMuiTheme } from "@material-ui/core"

const defaultTheme = createMuiTheme({ ... customisations that don’t rely on theme properties... })
const { breakpoints, typography: { pxToRem } } = defaultTheme

const theme = {
  ...defaultTheme,
  overrides: {
    MuiTypography: {
      h1: {
        fontSize: "5rem",
        [breakpoints.down("xs")]: {
          fontSize: "3rem"
        }
      }
    }
  }
}

export default theme