Baseei meu aplicativo em https://github.com/mui-org/material-ui/tree/v1-beta/examples/create-react-app-with-typescript
Estou tentando incluir uma barra de navegação 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 as fontes nos componentes da interface do usuário são pequenas. botões, selecionar, typograhy.
Por exemplo, por que vejo isso:
em vez de https://material-ui-next.com/demos/app-bar/
Quero dizer, por que a fonte é tão pequena?
O elemento h2
renderizado pela Tipografia tem o font-size
correto aplicado para essa variante: 1.3125rem
.
Como unidade para o tamanho da fonte, rem
é um múltiplo do tamanho da fonte base padrão , normalmente definido para o elemento html
. Inspecione seu documento, há um tamanho de fonte definido em seu elemento html
?
Você seria capaz de reproduzir isso em codesandbox ?
À parte, esse tipo de coisa é perfeito para StackOverflow . Se você postar uma pergunta, é provável que obtenha ajuda. Há muitos membros ativos da comunidade lá. Os problemas são diferentes das perguntas de suporte.
Vamos esperar mais informações de você, mas à primeira vista, isso não parece ser um problema com material-ui.
As pessoas podem desativar esse comportamento de acessibilidade definindo o seguinte estilo:
html {
font-size: 16px;
}
Comentários muito úteis
As pessoas podem desativar esse comportamento de acessibilidade definindo o seguinte estilo: