我在 theme.ts 中为 material-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,
}
};
然后在我的自定义 React 组件 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 header 没有样式，因为它必须在 Material 设计中。没有 Roboto 字体，尺寸更小。
material-ui 是否具有内置样式或其他我可以用来根据 Material 指南轻松设置标题样式并为元素提供间距(边距和填充)的样式？
最佳答案
Material-UI 不包含 Roboto 字体，it is up to you to include it in your project .
通过在 <head> 中添加以下内容来快速验证这一点你的 HTML 元素并检查你的 h1 header 样式为:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
如果您想下载 Roboto 字体并将其包含在您的静态 Assets 中，您可以从这里获取:https://www.fontsquirrel.com/fonts/roboto
关于javascript - material-ui 中的排版和间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35650849/