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

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

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

我不知道为什么这不会引起我的共鸣，但它没有而且看起来很模糊。我继续阅读更多文档，发现它与以下元素结合使用：

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

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

<h4>h4. Heading</h4>

我显然错过了这里的主要用例和概念，这就是为什么我需要一些帮助来了解我究竟使用它的原因，所以我不只是复制和粘贴我并不真正了解它们用途的组件。这个组件的用例是什么，我为什么要使用它？

标签： reactjsmaterial-uijsx

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

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