React 中的 Typography 组件到底是什么？

Question

我正在使用 Material-UI 组件库，并查看<Typography>经常使用的组件。我已经阅读了文档，这里是定义：

使用排版尽可能清晰有效地展示您的设计和内容

我不确定为什么这不会引起我的共鸣，但它不会而且似乎很模糊。我继续阅读更多文档，我看到它与以下元素结合使用：

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

为什么不直接使用以下内容：

<h4>h4. Heading</h4>

我显然在这里遗漏了主要用例和概念，这就是为什么我需要一些帮助来理解我使用它的确切用途，所以我不仅仅是复制和粘贴我并不真正了解它们用途的组件。这个组件的用例是什么，我为什么要使用它？

Answer 1

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

• 所有文本将自动遵循 Material Design 规则（请参阅System 部分下以Basic开头的所有部分）
• 由于所有文本都继承自一个通用主题系统，因此更改您的基本主题将Typography统一影响所有组件，从而使您可以维护通用设计语言，而单独使用h4标签则不会

您可以访问Material Design网站，了解有关其设计语言的更多详细信息。在那里，您还可以阅读他们的排版规则。