MUI 中的响应式排版？

Question

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

MUI 是否具有使排版响应的机制？

我看到默认主题具有以 rems 定义的字体大小 - 这是否意味着它只是减少基本字体大小的问题？ （这似乎不起作用，如果您想以不同的速率减少标题字体怎么办）。

原文由 dwjohnston 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新

MUI v4 内置了响应式排版！ 在这里 查看详细信息。

旧回应

@Luke 的 回答 很棒。我想添加一些细节以使这项工作在实践中发挥作用，因为 断点 和 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

原文由 Tim Holmes-Mitra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

其他答案均未使用 variant 预设。

MUI v5 的最佳方式，并使用 variant ：

 <Typography sx={{ typography: { sm: 'body1', xs: 'body2' } }} >
    Hello world!
</Typography>

原文由 gaohomway 发布，翻译遵循 CC BY-SA 4.0 许可协议