材料中的排版和间距-ui

Question

我定义的原始主题material-ui在theme.ts:

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标题没有样式,因为它必须在Material设计中.没有Roboto字体,更小的尺寸.

material-ui是否具有内置样式或其他可用于根据材质指南轻松设置标题样式并且还为元素提供间距(边距和填充)的内容？

Answer 1

更新：

Material-ui 现在有Typography组件：

<Typography variant="h1" component="h2">
  h1. Heading
</Typography>

此外，还可以进行版式定制和实用程序来控制对齐、换行、重量等。

旧答案：

Material-ui 1.0 将附带Typography组件：用法和API。

您现在可以通过安装来尝试material-ui@next：

npm install material-ui@next --save