私は自分のアプリを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コンポーネントのすべてのフォントが小さいようです。 ボタン、選択、タイプミス。
たとえば、なぜ私はこれを見るのですか?
https://material-ui-next.com/demos/app-bar/の代わりに
なぜフォントがこんなに小さいのですか?
Typographyによってレンダリングされたh2
要素には、そのバリアントに適用された正しいfont-size
があります: 1.3125rem
。
フォントサイズの単位として、 rem
はデフォルトの基本フォントサイズの倍数であり、通常はhtml
要素に対して定義されます。 ドキュメントを調べてください。 html
要素にフォントサイズが定義されていますか?
これをcodesandboxで再現できますか?
余談ですが、このタイプのものはStackOverflowに最適です。 質問を投稿すると、助けが得られる可能性があります。 そこには活発なコミュニティメンバーがたくさんいます。 問題はサポートの質問とは異なります。
詳細についてはお待ちしておりますが、一見したところ、これはmaterial-uiの問題ではないようです。
次のスタイルを設定することで、このアクセシビリティ動作を無効にできます。
html {
font-size: 16px;
}
最も参考になるコメント
次のスタイルを設定することで、このアクセシビリティ動作を無効にできます。