web-dev-qa-db-fra.com

Typographie réactive dans Material-UI?

Les conceptions ont généralement des polices de titre plus petites pour les conceptions mobiles.

Material-UI a-t-il un mécanisme pour rendre la typographie sensible?

Je vois que le thème par défaut a les tailles de police définies dans rems - cela signifie-t-il qu'il s'agit simplement de réduire la taille de police de base? (Cela ne semble pas fonctionner, que se passe-t-il si vous souhaitez réduire les polices de titre à des taux différents).

responsive-designmaterial-uitypography
13
dwjohnston

Il n'existe aucun mécanisme spécifique pour définir des tailles de typographie réactives.

Vous pouvez mettre à l'échelle la taille de tous les MUI Typography en modifiant le font-size du <html> élément, comme vous l'avez mentionné. ( documents )

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

Edit Material UI - scale font size

Remplace le thème

Pour autant que je sache, la seule autre option consiste à utiliser des remplacements de thème pour définir des styles personnalisés pour chacune des variantes Typography.

Cela nécessite de répliquer une partie de la logique dans createTypography.js (c'est-à-dire en définissant des hauteurs de ligne pour maintenir le rythme vertical)

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

Edit Material UI - Responsive font size

11
Luke Peavey

Mise à jour

MUI v4 intègre une typographie réactive! Vérifiez ici pour plus de détails.

Ancienne réponse

La réponse de @ luke est excellente. Je voulais ajouter quelques détails pour que cela fonctionne dans la pratique, car les deux points d'arrêt et pxToRem sont accessibles sur l'objet du thème ... le meaking cela devient un poulet et problème d'oeufs! Mon approche:

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

J'espère que cela est utile à quelqu'un!

8
Tim Holmes-Mitra