Адаптивная типография в Material-UI? - PullRequest
Новая
       25

Адаптивная типография в Material-UI?

0 голосов
/ 24 сентября 2018

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

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

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

Ответы [ 2 ]

0 голосов
/ 23 ноября 2018

@ Люк ответит отлично.Я хотел бы добавить некоторые детали, чтобы сделать это на практике, потому что на объекте темы доступны и точки останова , и 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

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

0 голосов
/ 25 сентября 2018

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

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

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

Edit Material UI - scale font size

Переопределение темы

Насколькоя знаю, что единственный вариант - использовать переопределения тем для определения пользовательских стилей для каждого из вариантов Typography.

Это требует репликации некоторой логики в createTypography.js (т.е. установка высоты линий для поддержания вертикального ритма) 

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

Edit Material UI - Responsive font size

...