Π― ΠΎΡΠ½ΠΎΠ²Π°Π» ΡΠ²ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° 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
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Typography, ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ font-size
ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π½ΡΠΉ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ°: 1.3125rem
.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° rem
ΠΊΡΠ°ΡΠ½ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ , ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌΠΎΠΌΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° html
. ΠΡΠΎΠ²Π΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ Π»ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° html
?
Π‘ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΡΠΎ Π²
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ°ΠΊΠΈΠ΅ Π²Π΅ΡΠΈ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ StackOverflow . ΠΡΠ»ΠΈ Π²Ρ ΠΎΠΏΡΠ±Π»ΠΈΠΊΡΠ΅ΡΠ΅ Π²ΠΎΠΏΡΠΎΡ, Π²Π°ΠΌ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° ΠΏΠΎΠΌΠΎΠ³ΡΡ. Π’Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΎ Π°ΠΊΡΠΈΠ²Π½ΡΡ ΡΡΠ°ΡΡΠ½ΠΈΠΊΠΎΠ² ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π°. ΠΡΠΎΠ±Π»Π΅ΠΌΡ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ² ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ.
ΠΡ Π±ΡΠ΄Π΅ΠΌ ΠΆΠ΄Π°ΡΡ ΠΎΡ Π²Π°Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, Π½ΠΎ Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΡΡΠΎ Π½Π΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ material-ui.
ΠΡΠ΄ΠΈ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΡΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠΈΠ»Ρ:
html {
font-size: 16px;
}
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΠ΄ΠΈ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΡΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠΈΠ»Ρ: