React中的版式组件到底是什么？

Question

我正在使用Material-UI组件库，并看到经常使用的<Typography>组件。我已经读过docs，这里是定义：

  

使用字体清晰地呈现您的设计和内容，   尽可能高效

我不确定为什么这不会引起我的共鸣，但却没有引起我的共鸣。我继续阅读了更多文档，然后将其与以下元素结合使用：

<Typography variant="h4" gutterBottom>
  h4. Heading
</Typography>

为什么不只使用以下内容：

<h4>h4. Heading</h4>

我在这里显然缺少主要的用例和概念，这就是为什么我需要一些帮助来了解我到底使用了什么用，所以我不仅仅是在不真正了解其用途的地方复制和粘贴组件。该组件的用例是什么？为什么要使用它？

Answer 1

与大多数具有通用UI / UX设计语言的React组件库一样，Material-UI将许多文本元素抽象为一个通用组件-Typography。这样做的原因可能更多，但我知道的两个较大的原因是：

• 所有文本将自动遵循“材料设计”规则（请参阅以Basic under the System section开头的所有部分）
• 由于所有文本均从通用主题系统继承而来，因此更改基本主题将统一影响所有Typography组件，从而使您可以维持通用设计语言，而单独使用h4标签不会< / li>

您可以访问Material Design网站以获取有关其设计语言的更多详细信息。在这里，您还可以阅读有关typography的规则。