Too small font in react app with typescript example

[Liero]

I've based my app on https://github.com/mui-org/material-ui/tree/v1-beta/examples/create-react-app-with-typescript

I'm trying to include very basic navbar:

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));

It seems like all the fonts in material ui components are small. buttons, select, typograhy.

For example, why I see this:

instead of https://material-ui.com/demos/app-bar/

I mean why is the font so small?

[kgregory]

The h2 element rendered by Typography has the correct font-size applied for that variant: 1.3125rem.

As a unit for font size, rem is a multiple of the default base font-size, typically defined for the html element. Inspect your document, is there a font-size defined on your html element?

Would you be able to reproduce this in codesandbox?

[kgregory]

As an aside, this type of thing is perfect for StackOverflow. If you post a question, you're likely to get some help. There are a lot of active community members there. Issues are different from support questions.

We'll hold out for more information from you, but at first blush, this doesn't seem to be a problem with material-ui.

[oliviertassinari]

People can disable this accessibility behavior by setting the following style:

html {
  font-size: 16px;
}