zdefiniowałem surowe motywu dla material-ui
w theme.ts
:Typografia i odstępy w materialnym-ui
import {Colors, Spacing} from 'material-ui/lib/styles/';
import {ColorManipulator} from 'material-ui/lib/utils/';
import {Styles} from 'material-ui';
export default <Styles.RawTheme> {
spacing: Spacing,
fontFamily: 'Roboto, sans-serif',
palette: <Styles.ThemePalette> {
primary1Color: Colors.red500,
primary2Color: Colors.red700,
primary3Color: Colors.lightBlack,
accent1Color: Colors.orangeA200,
accent2Color: Colors.grey100,
accent3Color: Colors.grey500,
textColor: Colors.darkBlack,
alternateTextColor: Colors.white,
canvasColor: Colors.white,
borderColor: Colors.grey300,
disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
pickerHeaderColor: Colors.red500,
}
};
Wtedy w moim zwyczaju React składnik app.tsx
Zgłosiłem ten temat:
import * as React from 'react';
import {AppBar, AppCanvas} from 'material-ui';
import {ThemeManager, ThemeDecorator} from 'material-ui/lib/styles/';
import Theme from 'theme';
@ThemeDecorator(ThemeManager.getMuiTheme(Theme))
export class App extends React.Component<{}, {}> {
constructor(props) {
super(props);
}
render() {
return (
<div>
<AppBar title={ 'App' } showMenuIconButton={false}/>
<AppCanvas>
<h1>Test</h1>
</AppCanvas>
</div>
);
}
}
Ale h1
nagłówek nie jest stylizowany tak, jak musi być w Material design. No Roboto
czcionka, mniejszy rozmiar.
Czy materiały-ui mają wbudowane style lub coś innego, czego można użyć do łatwego kształtowania nagłówków zgodnie z wytycznymi dotyczącymi materiałów, a także do wstawiania odstępów (marginesów i wypełnień) w elementach?
Dzięki. Przegłosowałem. Poszukałem implementacji stylów typograficznych z https://material.io/guidelines/style/typography.html#typography-styles. Już obejść. Postaram się udostępnić później. – mixel