Material-ui: Police trop petite dans l'application React avec exemple dactylographié

Créé le 5 mars 2018  ·  3Commentaires  ·  Source: mui-org/material-ui

J'ai basé mon application sur https://github.com/mui-org/material-ui/tree/v1-beta/examples/create-react-app-with-typescript

J'essaie d'inclure une barre de navigation très basique:

const styles: StyleRulesCallback<'root'> = theme => ({
  root: {
    textAlign: 'center',
    paddingTop: theme.spacing.unit * 20,
  },
});

class App extends React.Component<WithStyles<'root'>, {}> {

  render() {
    return (
      <div className={this.props.classes.root}>

          <AppBar>
            <Toolbar>
              <Typography variant="title" color="inherit">
                 Title
              </Typography>
            </Toolbar>
          </AppBar>

      </div>
    );
  }
}

export default withRoot(withStyles(styles)<{}>(App));

Il semble que toutes les polices des composants matériels de l'interface utilisateur soient petites. boutons, sélectionner, typograhy.

Par exemple, pourquoi je vois ceci:
Imgur

au lieu de https://material-ui-next.com/demos/app-bar/

Je veux dire pourquoi la police est-elle si petite?

image

question

Commentaire le plus utile

Les utilisateurs peuvent désactiver ce comportement d'accessibilité en définissant le style suivant:

html {
  font-size: 16px;
}

Tous les 3 commentaires

L'élément h2 rendu par Typography a le bon font-size appliqué pour cette variante: 1.3125rem .

En tant qu'unité pour la taille de la police, rem est un multiple de la taille de police de base par défaut , généralement définie pour l'élément html . Inspectez votre document, y a-t-il une taille de police définie sur votre élément html ?

Seriez-vous capable de reproduire cela dans codesandbox ?

En passant , ce type de chose est parfait pour

Nous attendrons plus d'informations de votre part, mais à première vue, cela ne semble pas être un problème avec material-ui.

Les utilisateurs peuvent désactiver ce comportement d'accessibilité en définissant le style suivant:

html {
  font-size: 16px;
}
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

revskill10 picture revskill10  ·  3Commentaires

sys13 picture sys13  ·  3Commentaires

FranBran picture FranBran  ·  3Commentaires

pola88 picture pola88  ·  3Commentaires

rbozan picture rbozan  ·  3Commentaires