Question

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

Material-UI是否具有使排版响应的机制？

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

Answer 1

没有用于设置响应式字体大小的特定机制。

如上所述，您可以通过更改Typography元素的font-size来缩放所有MUI <html>的大小。（docs）

const styles = theme => ({
  "@global": {
    html: {
      [theme.breakpoints.up("sm")]: {
        fontSize: 18
      }
    }
  }
}

主题覆盖

据我所知，唯一的其他选择是使用主题替代为每个Typography变体定义自定义样式。

这需要复制createTypography.js中的某些逻辑（即，设置行高以保持垂直节奏）

const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      headline: {
        fontSize: pxToRem(24),
        [breakpoints.up("md")]: {
          fontSize: pxToRem(32)
        }
      }
    }
  }

Answer 2

@luke的答案很好。我想添加一些细节以使它在实践中可行，因为在主题对象上都可以访问 breakpoints 和 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

希望这对某人有用！

Answer 3

如in the docs所述，您可以使用responsiveFontSizes()助手来使主题中的Typography字体大小响应。

import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';

let theme = createMuiTheme();
theme = responsiveFontSizes(theme);

Material-UI中的响应式排版？

3 个答案: