material-ui 中的排版和间距
[英]Typography and spacing in material-ui
问题描述
I defined raw theme for material-ui in theme.ts :
我在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,
}
};
Then in my custom React component app.tsx I 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 h1 header is not styled as it has to be in Material design.但是h1标头的样式不是材料设计中必须的样式。 No Roboto font, smaller size.没有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 指南轻松设置标题样式并为元素提供间距（边距和填充）的其他样式？
3 个解决方案
解决方案1
3 2016-12-19 05:26:00
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 h1 header is styled:通过在 HTML 的<head>元素中添加以下内容并检查您的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
解决方案2
3 已采纳 2017-11-16 09:38:15
UPDATE:更新：
material-ui now has Typography component: material-ui 现在有Typography组件：
<Typography variant="h1" component="h2">
h1. Heading
</Typography>
Also there are possibilities for typography customizations and utilities to control alignment, wrapping, weight, and more.此外，还可以使用排版自定义和实用程序来控制对齐、包装、重量等。
OLD ANSWER:旧答案：
material-ui 1.0 will come with Typography component: usage and API . material-ui 1.0 将带有Typography组件： usage和API 。
You can try it right now by installing material-ui@next :您现在可以通过安装material-ui@next来尝试：
npm install material-ui@next --save
解决方案3
0 2016-03-02 20:47:48
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.并使用这些设置。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.