に私はtheme.ts
にmaterial-ui
の生のテーマを定義した:タイポグラフィと間隔材料-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,
}
};
その後、私のカスタムでは、コンポーネントapp.tsx
反応し、私はこのテーマを適用:
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>
);
}
}
しかしh1
ヘッダーではありませんそれはマテリアルデザインでなければならないので、スタイリングされています。いいえRoboto
フォント、小さいサイズ。材料-UIは
を内蔵されていないスタイルや何か他のもの、私は素材のガイドラインに従ってに簡単にスタイルヘッダーを使用しても要素に間隔(マージンとパディング)を与えることができますか?
感謝。私はupvoted。私はhttps://material.io/guidelines/style/typography.html#typography-stylesからタイポグラフィスタイルの実装を探しました。私はすでにいくつかの回避策を講じています。後でそれを共有しようとします。 – mixel