我在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
字體,更小的尺寸。
material-ui是否有內置樣式或其他可用於根據材質準則輕鬆設置標題樣式的其他內容,還可以爲元素提供間距(邊距和填充)?
謝謝。我upvoted。我從https://material.io/guidelines/style/typography.html#typography-styles尋找版式樣式的實現。我已經做了一些解決方法。稍後會嘗試分享。 – mixel