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不包含Roboto字体it is up to you to include it in your project。

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

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

如果您要下载Roboto字体并将其包含在静态资源中，可以从此处获取：https://www.fontsquirrel.com/fonts/roboto

Answer 2

material-ui 1.0将附带Typography组件：usage和API。

您可以通过安装material-ui@next：

立即尝试

npm install material-ui@next --save

Answer 3

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

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: {...}
}

并使用这些设置。

材料中的排版和间距-ui

3 个答案: