Basé mi aplicación en https://github.com/mui-org/material-ui/tree/v1-beta/examples/create-react-app-with-typescript
Estoy tratando de incluir una barra de navegación muy básica:
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));
Parece que todas las fuentes de los componentes de material ui son pequeñas. botones, seleccionar, tipografía.
Por ejemplo, por qué veo esto:
en lugar de https://material-ui-next.com/demos/app-bar/
Quiero decir, ¿por qué la fuente es tan pequeña?
El elemento h2
representado por Typography tiene el font-size
correcto aplicado para esa variante: 1.3125rem
.
Como unidad para el tamaño de fuente, rem
es un múltiplo del tamaño de fuente base predeterminado , normalmente definido para el elemento html
. Inspeccione su documento, ¿hay un tamaño de fuente definido en su elemento html
?
¿Podrías reproducir esto en codesandbox ?
Además, este tipo de cosas es perfecto para StackOverflow . Si publica una pregunta, es probable que obtenga ayuda. Allí hay muchos miembros activos de la comunidad. Los problemas son diferentes a las preguntas de soporte.
Esperaremos más información de usted, pero a primera vista, esto no parece ser un problema con material-ui.
Las personas pueden deshabilitar este comportamiento de accesibilidad configurando el siguiente estilo:
html {
font-size: 16px;
}
Comentario más útil
Las personas pueden deshabilitar este comportamiento de accesibilidad configurando el siguiente estilo: