Material-ui: Fonte muito pequena no aplicativo react com exemplo de texto digitado

Criado em 5 mar. 2018  ·  3Comentários  ·  Fonte: mui-org/material-ui

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:
Imgur

em vez de https://material-ui-next.com/demos/app-bar/

Quero dizer, por que a fonte é tão pequena?

image

question

Comentários muito úteis

As pessoas podem desativar esse comportamento de acessibilidade definindo o seguinte estilo:

html {
  font-size: 16px;
}

Todos 3 comentários

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;
}
Esta página foi útil?
0 / 5 - 0 avaliações