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

【问题标题】：What exactly is a Typography component in React?React 中的 Typography 组件到底是什么？
【发布时间】：2019-12-28 07:56:38
【问题描述】：

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

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

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

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

为什么不直接使用以下代码：

<h4>h4. Heading</h4>

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

所以这确实是有道理的，但这与 <CssBaseline /> 通过在应用程序的根目录中添加它所做的有什么不同？它是否还没有标准化所有这一切，使<Typography> 的使用变得多余？
CssBaseline 有不同的用途。注意the docs 提到 normalize.css 的方式。规范化（以及重置、清理等）是所有样式表，它们为某些事物（所有在文档中列出）设置基线样式以在浏览器中统一表现。对于我可以在 cmets 中提供的更深入的解释，我鼓励您研究和阅读重置样式表的历史。一个很好的起点是阅读Eric Meyer's CSS Reset。