Material-ui: タイプスクリプトの例でreactアプリのフォントが小さすぎる

作成日 2018年03月05日  ·  3コメント  ·  ソース: mui-org/material-ui

私は自分のアプリをhttps://github.com/mui-org/material-ui/tree/v1-beta/examples/create-react-app-with-typescriptに基づいてい

私は非常に基本的なナビゲーションバーを含めようとしています:

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

マテリアルUIコンポーネントのすべてのフォントが小さいようです。 ボタン、選択、タイプミス。

たとえば、なぜ私はこれを見るのですか?
Imgur

https://material-ui-next.com/demos/app-bar/の代わりに

なぜフォントがこんなに小さいのですか?

image

question

最も参考になるコメント

次のスタイルを設定することで、このアクセシビリティ動作を無効にできます。

html {
  font-size: 16px;
}

全てのコメント3件

Typographyによってレンダリングされたh2要素には、そのバリアントに適用された正しいfont-sizeがあります: 1.3125rem

フォントサイズの単位として、 remはデフォルトの基本フォントサイズの倍数であり、通常はhtml要素に対して定義されます。 ドキュメントを調べてください。 html要素にフォントサイズが定義されていますか?

これをcodesandboxで再現できますか?

余談ですが、このタイプのものはStackOverflowに最適です。 質問を投稿すると、助けが得られる可能性があります。 そこには活発なコミュニティメンバーがたくさんいます。 問題はサポートの質問とは異なります。

詳細についてはお待ちしておりますが、一見したところ、これはmaterial-uiの問題ではないようです。

次のスタイルを設定することで、このアクセシビリティ動作を無効にできます。

html {
  font-size: 16px;
}
このページは役に立ちましたか?
0 / 5 - 0 評価