Material-ui: Fuente demasiado pequeña en la aplicación de reacción con ejemplo de mecanografiado

Creado en 5 mar. 2018  ·  3Comentarios  ·  Fuente: mui-org/material-ui

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

en lugar de https://material-ui-next.com/demos/app-bar/

Quiero decir, ¿por qué la fuente es tan pequeña?

image

question

Comentario más útil

Las personas pueden deshabilitar este comportamiento de accesibilidad configurando el siguiente estilo:

html {
  font-size: 16px;
}

Todos 3 comentarios

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;
}
¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

zabojad picture zabojad  ·  3Comentarios

reflog picture reflog  ·  3Comentarios

chris-hinds picture chris-hinds  ·  3Comentarios

rbozan picture rbozan  ·  3Comentarios

ghost picture ghost  ·  3Comentarios