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:
au lieu de https://material-ui-next.com/demos/app-bar/
Je veux dire pourquoi la police est-elle si petite?
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;
}
Commentaire le plus utile
Les utilisateurs peuvent désactiver ce comportement d'accessibilité en définissant le style suivant: