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

MUI是否有一种机制可以使排版更具响应性?

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

推荐答案

Update

MUI v4内置了响应性强的字体设计!查看here了解详细信息.

Old response

@Luke's answer很棒.我想添加一些细节,使这项工作在实践中,因为breakpointspxToRem都可以在主题对象上访问...这就成了鸡和蛋的问题!我的方法是:

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

Reactjs相关问答推荐

从另一个组件更改组件中const的状态

使用Thattle和Use Effect setTimeout进行搜索有什么不同

有没有办法让两个状态在两次精准渲染中更新?

面对动画警告:未指定`useNativeDriver`.这是必需的选项,并且必须在REACT本机中显式设置为`true`或`False`

在Reaction中导入';图片&文件夹时出错

我如何在不被 destruct 的情况下将导航栏固定在顶部?

Antd V5组件自定义主题

有没有办法在 React Router v6 中的路由匹配上运行一些逻辑/功能?

使用以Jest 的方式返回 Promise 的方法来模拟可构造的 API 类时出现问题

Reactjs:MUI5:MobileDateTimePicker API:如何自定义日历中的文本

React - 如何重定向页面以显示数据修改?

Zod 验证模式根据另一个数组字段使字段成为必需字段

RTK 查询Mutations 在 StrictMode 中执行两次

如何避免在 react useEffect 上滚动时出现小的延迟?

响应式媒体 React Tailwind

如何检索包含动态段的未解析路径?

在 redux 中分派到另一个减少时状态值不会改变

将鼠标悬停在仅适用于该类的第一个实例的 p5.js 类上

当页面重新加载react 路由导航到第一页 v6

为什么我不能使用 formik 更改此嵌套对象中的值