什么时候应该在 Material-UI 中使用 Typography?

2023-12-27

我正在使用 Material-UI,但我有点困惑。有这个组件Typography https://material-ui.com/components/typography/#typography但我真的不明白何时使用它以及它的目的是什么。

什么时候应该Typography使用?它可以解决/帮助什么问题,或者如果我在开发时使用它会带来什么好处?

举一个例子对我更好地理解它很有帮助。


正如杜波卡斯所说,这是标准化文本的方式。

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

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

为您所有的字幕

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

使用该组件,您不必向文本添加具有特定 className 的 div 来设置特定样式。默认情况下,它们都应用在版式上。

版式有更多可以传递的属性,例如“组件”,它允许您选择 html 标签的类型来包装文本。以前的版本中并非如此

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

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

请查看排版“API”部分,它很有用且有帮助。

希望它有帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

什么时候应该在 Material-UI 中使用 Typography? 的相关文章

随机推荐

  • 用于检查进程是否正在运行的 shell 脚本

    发生了一些奇怪的行为 让我觉得可能发生了一些事情 所以我有一个由 cron 执行的 shell 脚本 基本上它是为了检查 Node js 是否正在运行 如果是这样 请记录日期 如果不是 则不记录任何内容 在我构建它时 我测试了它并看到它在节
  • Google Speech-to-text API,InvalidArgument:400 必须使用单通道(单声道)

    我不断收到此错误InvalidArgument 400在 google Speech to text 中 问题似乎是我使用 2 通道音频 立体声 并且 API 正在等待 单声道 中的 wav 如果我在音频编辑器中转换文件 它可能会起作用 但
  • Google 字体无法在 Safari 上运行

    我正在努力让我的网站在 Safari 和 Chrome 下看起来相同 在 Chrome 中 它看起来正是我想要的样子 主要问题是 Google Font 似乎无法在 Safari 下加载 因为我使用的是 Google Font 网站上给出的
  • 如何在 JavaFx 中设置 svgPath 的大小

    我有一个包含 ListCells 的 ListView 其中包含由 SvgPath 定义的图标 private class CustomCell extends ListCell
  • Perl 中的配置文件处理

    CPAN 上的 Config 命名空间中有很多模块 但它们都受到某种方式的限制 我目前正在使用配置 标准 http search cpan org perldoc Config Std 这在大多数情况下都很好 但是它使某些事情变得困难 超过
  • Laravel 5.6 存储链接已存在,但尝试从公共文件夹获取文件时出现 404 错误

    我使用以下命令创建了一个符号链接 php artisan storage link 然后我创建了一个文件storage app public 根据文档 我可以通过以下方式获取该文件的链接 asset storage file txt htm
  • 如何使用lxml创建文本节点?

    我使用 lxml 和 python 来操作 xml 文件 我想创建一个最好没有标签的文本节点 而不是创建一个新的Element然后向其附加文本 我怎样才能做到这一点 我可以在中找到与此等效的内容xml dom minidompython 的
  • Proguard 和 R8 有什么区别?

    新版本的 Android Studio 3 4 刚刚发布 默认支持 R8 而不是 Proguard 有人可以解释一下两者之间的主要区别以及使用 R8 的任何明显好处吗 Android 构建过程的历史不断变化 开发人员不断尝试使其在构建时间和
  • 如何强制 iOS 立即更改背景颜色?

    有什么方法可以立即更改窗口的背景颜色吗 我需要一个闪烁的背景 即红 绿以一秒的间隔闪烁 正如我所见 背景颜色不会立即改变 而是仅在功能保留时才改变 有没有办法强制系统立即更改它并重绘窗口背景 void viewDidLoad super v
  • @将较少文件导入到有限范围内

    我想从另一个 less 文件导入所有样式 但范围有限 我正在尝试这个 我的网站 less wrapper class import path to styles less 但这根本不起作用 我使用基于浏览器的 less js 选项 并且可以
  • php 全局修剪 $_post

    你能修剪所有 POST 变量吗 因为我现在有一个很长的清单来修剪每个变量 看起来很不专业 我认为修剪 POST 也许会起作用 但没有 你可以这样做array map http php net array map POST array map
  • 如何修复 Android Studio 中的 VectorDrawableCompat 配置错误?

    我在 Android studio 中创建了一个项目 即使不修改项目中的任何单个字符 我也无法运行它 它给出以下错误 java lang RuntimeException 无法启动活动 组件信息 com kk myapplication c
  • 交集完成后,数组中的顺序是否保留?

    当我对两个数组进行交集时 是否可以保证结果顺序基于第一个数组的顺序 例如 如果我有 a 1 2 3 b 3 2 1 could a b return 3 2 1 代替 1 2 3 这是我所期望的 我在 RDoc 或 Pickaxe 的 Ar
  • 如何以编程方式调用 maven-resources-plugin

    我正在编写一个自定义 Maven 插件 该插件的部分工作是过滤复制一些资源 我写的代码如下所示 CopyResourcesMojo rm new CopyResourcesMojo rm setOutputDirectory outputD
  • 如何查找 Linux 上 Java Desktop API 需要哪些库?

    我正在尝试找到一种方法来确定 Java 需要哪些库才能使 Desktop API 工作 特别是BROWSE功能 我读了一些指南 错误报告和解决方法 但它们都不起作用 我可以通过安装使其在 Debian 上运行libgnome2 0 and
  • 将 C++ LPCWSTR 打印到文件

    我正在尝试将 LPCWSTR 值打印到文件中 但它只打印地址 而不打印值 我尝试过取消引用变量 使用 来获取 value 但这也不起作用 如何打印该值 void dump LPCWSTR text ofstream myfile C myf
  • 用于自定义图例的 Angular ngx-charts 选项?

    我目前正在使用 Angular2 的 ngx charts 我想自定义一些图例 例如将图例放在图表下方 或重命名图例字段 或使图例更宽 部分文本被截断 等 有什么好的选项来自定义图例吗 或者这通常是不可能的 或者最好的方法是什么 目前 我的
  • 添加 FFmpegMediaMetadataRetriever 后 Apk 大小增加

    我将依赖项 com github wseemann FFmpegMediaMetadataRetriever 1 0 3 添加到我的Android Studio中的应用程序 build gradle 中 apk从2 MB跳到16 MB 我只
  • 嘿,如何从 laravel 中的 klaviyo php-sdk 收集 laravel 中的短信同意

    嘿伙计们 有谁知道如何在 klaviyo 中添加短信内容吗 laravel 中的这个包 https github com klaviyo php klaviyo or just add a property to someone 基本上 我
  • 什么时候应该在 Material-UI 中使用 Typography?

    我正在使用 Material UI 但我有点困惑 有这个组件Typography https material ui com components typography typography但我真的不明白何时使用它以及它的目的是什么 什么时