Отзывчивая типография в Material-UI?

В дизайнах обычно используются шрифты меньшего размера для мобильных проектов.

Имеет ли Material-UI механизм, позволяющий сделать типографию отзывчивой?

Я вижу, что тема по умолчанию имеет размер шрифта, определенный в rems - означает ли это, что это просто уменьшение базового размера шрифта? (Это не работает, что делать, если вы хотите уменьшить шрифты заголовка с разной скоростью).

Ответы

Ответ 1

Не существует специального механизма для настройки адаптивных размеров шрифтов.

Вы можете масштабировать размер всех MUI Typography, изменив font-size элемента <html>, как вы упоминали. (документы)

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)
        }
      }
    }
  }

Ответ 2

Обновление

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

Надеюсь, это кому-нибудь пригодится!