# 文本组件

文本组件实现了 Material Design 中的文本样式：

* [Material Design guidelines: Typography](https://material.io/guidelines/style/typography.html)

这些组件有：

* **Text** - 文本组件的基础组件，可以通过`type`类型定制出下面所有的文本组件。
* **H1** - 相当于**Display4**
* **H2** - 相当于**Display3**
* **H3** - 相当于**Display2**
* **H4** - 相当于**Display1**
* **H5** - 相当于**Headline**
* **H6** - 相当于**Subheading**
* **P** - 相当于**Body1**
* **Display4**
* **Display3**
* **Display2**
* **Display1**
* **Headline**
* **Title**
* **Subheading**
* **Body2**
* **Body1**
* **Caption**
* **Button**

## 关于段落间距

推荐使用`margin`或者`padding`设置段落间的间距。所有的文本组件提供了`leading`属性，会给文本组件添加上`margin-top`，以期达到段落间距的设定效果。如：

```typescript
import { H4, P, Caption } from 'sinoui-components/Text';
import Card from 'sinoui-components/Card';

const CenterCard = Card.extend`
  text-align: center;
  padding: 24px;
`;

export default function Demo() {
  return (
    <CenterCard>
      <H4>春晓</H4>
      <Caption leading={1}>唐 孟浩然</Caption>
      <P leading={1}>春眠不觉晓，处处闻啼鸟。</P>
      <P>夜来风雨声，花落知多少。</P>
    </CenterCard>
  );
}
```

最终效果：

![](./images/text-leading.png)

关于段落间距的设定，参考[Material Design guidelines: Typography](https://material.io/guidelines/style/typography.html)。如下图所示：

![](./images/style-typography-styles-lineheight1.png)

![](./images/style-typography-styles-lineheight2.png)

![](./images/style-typography-styles-lineheight3.png)