Reactjs 材料用户界面中的响应式排版？

手机设计通常使用较小的标题字体

材料用户界面是否有一种使排版响应的机制

---

我看到默认主题的字体大小是在rems中定义的——这是否意味着只是减少基本字体大小的问题？（这似乎不起作用，如果你想以不同的速度减少标题字体怎么办）

更新

最新版本的Material UI（v4）完全支持响应排版。有关详细信息，请参阅

原始答案

从1.x版开始，MaterialUI没有处理响应性排版的特定机制

如前所述，您可以通过更改

元素的

字体大小来缩放所有MUI
字体的大小。（）

constyles=theme=>({
“@global”：{
html:{
[主题.breakpoints.up（“sm”）]：{
尺寸：18
}
}
}
}


主题覆盖

据我所知，唯一的另一种选择是使用主题覆盖为每个
排版
变体定义自定义样式

这需要复制中的一些逻辑（即设置线条高度以保持垂直节奏）

const theme=createMuiTheme({
覆盖：{
MuiTypography：{
标题：{
字体大小：pxToRem（24），
[断点.up（“md”）]：{
字体大小：pxToRem（32）
}
}
}
}

更新

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

希望这对某人有用！
如前所述，您可以使用
responsiveFontSizes（）
帮助程序使主题中的排版字体大小具有响应性

从'@material ui/core/styles'导入{createMuiTheme，responsiveFontSizes}；
让theme=CreateMuiteme（）；
主题=响应字体大小（主题）；
回答得好，谢谢。你知道为什么响应式排版在Material UI中不是一个东西吗？这似乎是一个很简单的问题。在你的第二段代码中，
断点
变量来自哪里？我知道它应该来自一个主题，但这正是你创建的东西，在你使用
断点时还没有创建>.这是正确的答案。谢谢分享卢克！