什么时候应该在 Material-UI 中使用排版？

Posted 2023-02-22

【中文标题】什么时候应该在 Material-UI 中使用排版？

【英文标题】：When should Typography be used in Material-UI?

【发布时间】：2020-04-03 16:40:03

【问题描述】：

我正在使用 Material-UI，我有点困惑。有组件Typography，但我真的不明白什么时候使用它以及它的目的是什么。

什么时候应该使用Typography？它解决/帮助了什么问题，或者如果我在开发时使用它会有什么好处？

举个例子让我更好地理解它。

【问题讨论】：

我相信这只是通过您的应用程序标准化文本的一种方式。 “字体比例是字体系统支持的 13 种样式的组合。它包含可重复使用的文本类别，每个类别都有预期的应用和含义。”有道理

相关答案：***.com/questions/56705789/…

另一个相关回答：***.com/questions/51862959/…

【参考方案1】：

正如杜波卡斯所说，这是规范文本的方式。

使用排版，您可以标准化所有类别的文本。例如，如果您希望所有标题具有相同的大小、字体、粗细……您可以这样使用它：

<Typography variant="h1">My Title</Typography>

为你所有的字幕

<Typography variant="subtitle1">My SubTitle</Typography>

使用该组件，您无需在文本中添加具有特定 className 的 div 即可设置特定样式。默认情况下，它们都应用于排版。

Typography 有更多可以传递的属性，比如“组件”，它可以让你选择 html 标签的类型来包装你的文本。 以前的版本不是这样

<Typography variant="body1" component="p">
      My Text
</Typography>

Material UI 是一个很棒的库，它可以为您做出选择，但也让您做出自己的选择。所有变体都可以定制。您可以查看自定义部分以了解如何操作。

请查看排版“API”部分，它很有用。

希望对您有所帮助。

【讨论】：

<Typography variant="h1">My Title</Typography> 和 <Typography variant="h2">My Title 2</Typography> 与仅使用 <h1>My Title</h1> 和 <h2>My Title 2</h2> 有何不同？

@ReturnOfTheMac 首先，Typography 将使用特定变体的样式，可以使用我们创建的主题进行自定义。换句话说，当我们说variant="h2" 时，Material 将自动为我们主题中定义的 h2 应用样式，我们可以轻松地为任何给定的变体进行更改。另一个特点是材料会自动改变Typography文本的颜色以与其容器形成对比。例如，如果我们创建一个绿色的AppBar，则应用栏中的Typography 文本将被着色，以便在该背景下非常容易阅读。

另外，将变体指定为h1 并不一定意味着Typography 将呈现为h1。默认情况下它会，但可以设置它，以便将变体h1 呈现为其他一些 html 标记。

谢谢。我想出于可访问性的原因，覆盖该默认行为可能是个坏主意。

我仍然看不到各种排版变体与拥有各种 css 类有何不同。在这两种情况下，我们都会标准化我们的文本。 <Typography variant="h3">Foo</Typography> 比 <h3 class="my-h3">Foo</h3> 好多少？如果有的话，它似乎更长。我错过了什么吗？