web-dev-qa-db-ja.com

Material-UIのレスポンシブタイポグラフィ？

一般に、デザインにはモバイルデザイン用の小さい見出しフォントがあります。

Material-UIには、タイポグラフィを反応させるメカニズムがありますか？

デフォルトのテーマにはレムで定義されたフォントサイズがあります-それはベースフォントサイズを小さくするだけのことですか？ （それはうまくいかないようです。見出しフォントを異なるレートで減らしたい場合はどうでしょうか）。

responsive-designmaterial-uitypography
13
dwjohnston

レスポンシブなタイポグラフィのサイズを設定するための特定のメカニズムはありません。

前述のように、font-size要素の<html>を変更することにより、すべてのMUI Typographyのサイズをスケーリングできます。 （ ドキュメント ）

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

11
Luke Peavey

更新

MUI v4にはレスポンシブなタイポグラフィが組み込まれています！詳細については here を確認してください。

古い応答

@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

これが誰かに役立つことを願っています！

8
Tim Holmes-Mitra