لقد أسست تطبيقي على 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));
يبدو أن جميع الخطوط في مكونات واجهة المستخدم المادية صغيرة. أزرار تحديد الطباعة.
على سبيل المثال ، لماذا أرى هذا:
بدلاً من https://material-ui-next.com/demos/app-bar/
أعني لماذا الخط صغير جدًا؟
العنصر h2
الذي يتم عرضه بواسطة الطباعة يحتوي على font-size
الصحيح المطبق لهذا المتغير: 1.3125rem
.
كوحدة لحجم الخط ، يعد rem
مضاعفًا لحجم الخط الأساسي الافتراضي ، والذي يتم تحديده عادةً للعنصر html
. افحص المستند ، هل هناك حجم خط محدد في عنصر html
؟
هل ستكون قادرًا على إعادة إنتاج هذا في صندوق الأكواد ؟
جانبا ، هذا النوع من الأشياء مثالي لـ StackOverflow . إذا نشرت سؤالاً ، فمن المحتمل أن تحصل على بعض المساعدة. هناك الكثير من أعضاء المجتمع النشطين هناك. تختلف المشكلات عن أسئلة الدعم.
سننتظر منك المزيد من المعلومات ، ولكن للوهلة الأولى ، لا يبدو أن هذه مشكلة في واجهة المستخدم المادية.
يمكن للأشخاص تعطيل سلوك الوصول هذا عن طريق تعيين النمط التالي:
html {
font-size: 16px;
}
التعليق الأكثر فائدة
يمكن للأشخاص تعطيل سلوك الوصول هذا عن طريق تعيين النمط التالي: