typescript material-ui 中的排版和间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35650849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Typography and spacing in material-ui
提问by mixel
I defined raw theme for material-uiin theme.ts:
我为material-uiin定义了原始主题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,
}
};
Then in my custom React component app.tsxI applied this theme:
然后在我的自定义 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>
);
}
}
But h1header is not styled as it has to be in Material design. No Robotofont, smaller size.
但是h1标题没有像材料设计那样设计。没有Roboto字体，尺寸更小。
Does material-ui have built-in styles or something else that I can use to easily style headers according to Material guidelines and also give spacing (margins and padding) to elements?
material-ui 是否具有内置样式或其他可用于根据 Material 指南轻松设置标题样式并为元素提供间距（边距和填充）的其他样式？
采纳答案by mixel
UPDATE:
更新：
material-ui now has Typographycomponent:
material-ui 现在有排版组件：
<Typography variant="h1" component="h2">
h1. Heading
</Typography>
Also there are possibilities for typography customizationsand utilitiesto control alignment, wrapping, weight, and more.
此外，还可以使用排版自定义和实用程序来控制对齐、环绕、重量等。
OLD ANSWER:
旧答案：
material-ui 1.0 will come with Typographycomponent: usageand API.
material-ui 1.0 将附带Typography组件：用法和API。
You can try it right now by installing material-ui@next:
您现在可以通过安装来尝试material-ui@next：
npm install material-ui@next --save
回答by Daniel Bank
Material-UI does not include the Roboto font, it is up to you to include it in your project.
Material-UI 不包含 Roboto 字体，您可以将其包含在您的项目中。
Quickly verify this by adding the following in the <head>element of your HTML and checking if your h1header is styled:
通过在<head>HTML 元素中添加以下内容并检查h1标题是否已设置样式来快速验证这一点：
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
If you want to download the Roboto font and include it in your static assets, you can get it from here: https://www.fontsquirrel.com/fonts/roboto
如果您想下载 Roboto 字体并将其包含在您的静态资产中，您可以从这里获取：https: //www.fontsquirrel.com/fonts/roboto
回答by Larry Maccherone
I'm not sure how font size is calculated in the final theme, but if it's a function of the content in spacing, then you can manipulate that by adding a spacing section to your raw theme like this:
我不确定最终主题中字体大小是如何计算的，但如果它是间距内容的函数，那么您可以通过向原始主题添加间距部分来操作它，如下所示：
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: {...}
}
and play with those settings.
并使用这些设置。
