material-ui 中的排版和间距

Question

我在 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 是否有 built-in 样式或其他我可以用来根据 Material 指南轻松设置 header 样式并给出间距（边距和填充）的东西) 到元素？

Answer 1

我不确定最终主题中字体大小是如何计算的，但如果它是间距内容的函数，那么您可以通过向原始主题添加间距部分来操纵它，如下所示：

export default <Styles.RawTheme> {
    fontFamily: 'Roboto, sans-serif',
    spacing: {
      iconSize: 24,
      desktopGutter: 24,
      desktopGutterMore: 32,
      desktopGutterLess: 16,
      desktopGutterMini: 8,
      desktopKeylineIncrement: 60,  // left-nav width = this * 4
      desktopDropDownMenuItemHeight: 32,
      desktopDropDownMenuFontSize: 15,
      desktopLeftNavMenuItemHeight: 30,
      desktopSubheaderHeight: 48,
      desktopToolbarHeight: 56
    },
    palette: {...}
}

并使用这些设置。

Answer 2

Material-UI 不包含 Roboto 字体，it is up to you to include it in your project。

通过在 HTML 的 <head> 元素中添加以下内容并检查 h1 header 是否设置了样式来快速验证这一点：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

如果您想下载 Roboto 字体并将其包含在您的静态资产中，您可以从这里获取：https://www.fontsquirrel.com/fonts/roboto

Answer 3

更新：

material-ui 现在有 Typography 个分量：

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

typography customizations and utilities 还可以控制对齐、环绕、重量等。

旧答案：

material-ui 1.0 将附带 Typography 组件：usage and API.

您现在可以通过安装 material-ui@next:

来试用

npm install material-ui@next --save

material-ui 中的排版和间距

Typography and spacing in material-ui

javascript

reactjs

typescript

material-ui