Material UI 5 学习04-Typography文本排版

最新推荐文章于 2024-12-20 17:21:24 发布
原创 最新推荐文章于 2024-12-20 17:21:24 发布 · 701 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui

本文介绍了如何在React应用中安装和使用MaterialUI库中的Robo字体，并详细讲解了Typography组件的variant属性，包括不同级别标题（h1-h6）和副标题（subtitle1和subtitle2）的用法，以及gutterBottom类的作用。

Typography文本排版

一、Robo字体安装

提示：Material UI默认使用Robo字体，因此我们需要安装这个字体

yarn add @fontsource/roboto

二、使用介绍

示例：
在这里插入图片描述

import {
   
   Box, Typography} from "@mui/material";
function App() {
最低0.47元/天 解锁文章
Android Jetpack Compose基础之MaterialTheme主题样式
hong_world的博客
03-05 1230
最终发现获取配色时，是通过MaterialTheme单例对象的colorScheme属性，间接使用了LocalColorScheme，而LocalColorScheme又是什么呢。那我们是如何引用到MaterialTheme中的相关配置呢，如MaterialTheme.colorScheme.surface，接下来看单例MaterialTheme。MaterialTheme它本身是一个Comsable组件，相关配置最终传入ProvideTextStyle，在其内部进行调用。
【Material-UI】Typography 组件中的 Customization 功能详解
lph159的博客
09-03 766
Typography 组件是 Material-UI 提供的一个强大工具，用于在应用中呈现各种文本内容。通过设置不同的变体（如h1body1subtitle1等），开发者可以轻松地为文本应用多种样式，并根据不同的 UI 需求进行调整。Typography 组件还支持自定义变体和语义元素，从而提高应用的灵活性和可维护性。Customization 功能是指开发者可以根据项目需求，添加或禁用 Typography 组件的某些变体，或通过属性改变变体与 HTML 语义元素的映射关系。
自学WPF--第九课Typography.Variants属性
merryken的专栏
08-01 705
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="Ma
边学边用--使用React下的Material UI框架开发一个简单的仿MetaMask的网页版以太坊钱包（一）
天草降临的博客
01-22 1981
一、前言 区块链经历了长时期的低谷，最近又火了起来。目前国家也在推动，也许央行今年就要发行数字货币了。提到区块链，不能不提比特币和以太坊，区块链诞生于比特币，比特币就是区块链1.0。以太坊将区块链发扬光大，是为区块链2.0。然而我们想要和以太坊交互，就必须有一个以太坊钱包。以太坊钱包有很多重，但桌面上用的最多的是Chrome浏览器里的MetaMask插件。手机上的钱包有很多，这里不列举了。但是使用...
React MUI（版本v5.15.2）详细使用
一步一个脚印，踏实努力，向着目标前进
12-30 1593
React MUI（版本v5.15.2）是一个流行的React UI框架，提供了大量预先构建的组件，可帮助开发人员快速构建高质量的用户界面。总的来说，React MUI是一个功能强大、灵活且易于使用的React UI框架，适合用来构建各种各样的Web应用程序。
Element Plus 实例详解（七）___Typography 排版
逆境清醒的博客
03-26 3071
Element Plus Typography 排版，对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。1Element Plus 实例详解（一）__安装设置2Element Plus 实例详解（二）___Button 按钮3Element Plus 实例详解（三）___Date Picker 日期选择4Element Plus 实例详解（四）___Border 边框5Element Plus 实例详解（五）___Scrollbar 滚动条6。
react-native-typography-master.zip_oneprz_react-native_typograph
09-15
React Native Typography项目可能包含了一系列预定义的文本样式，这些样式对应于iOS和Android各自的UI指南，比如Material Design（Android）和Human Interface Guidelines（iOS）。开发者可以简单地引入这些预设样式...
深入研究Material-UI：React UI组件库应用
在“study-material-ui:研究材料React UI”这一学习项目中，重点在于深入理解 Material-UI 在 React 应用中的集成方式、组件使用规范、主题系统配置、响应式布局实现以及与其他前端工具链的协同工作模式。...
NextJS样板项目：集成Redux与Material UI
- **Typography**：用于文本排版的组件。 ### 结合Next.js、Redux和Material-UI 在本示例项目中，Next.js作为基础框架提供了路由和渲染功能，Redux被用于管理整个应用的状态，而Material-UI则提供了丰富的UI组件来...
基于TypeScript与React的Material-UI计算器应用
标题“计算器：打字稿，react，material-ui”明确指出该项目是一个基于现代前端技术栈构建的计算器Web应用，其核心技术组合为TypeScript、React与Material-UI。这一组合代表了当前前端开发中高效、可维护且具备良好...
质感设计-样式-字体排印Typography
tq1086的博客
03-18 515
如果需要支持不同尺寸的设备，可以定义字体等级，添加或移除样式，甚至使用其他字体替换Roboto。质感设计采用以14号为基准尺寸的大二度字体等级。基准尺寸是排版正文最常用的样式。图9 质感设计字体等级采用大二度比例（1.125）。字体等级渲染尺寸应当以产生显著区别为目标，避免细微差异。图10 质感设计字体等级包含15种样式。图11 你的产品大概不会使用质感设计字体等级中全部的样式。在本例中，我们选择五种字体尺寸，忽略其他样式。图12 如果质感设计字体等级无法满足需求，你可以修改相应数值。
快速配置，高效开发：Typography 组件，让文本操作变得轻松！
最新发布
weixin_48028935的博客
12-20 1109
Typography 排版组件通过封装文本排版常用需求，快速实现多样化的文本样式和交互，显著提升开发效率并统一用户体验。
Compose - MaterialTheme
HugMua的博客
04-01 785
直接把任何组合函数用 MaterialTheme{ } 包裹起来，就可以使用相关属性了。也可以单独将某个属性拿出来使用。
Material UI 的安装与使用
zheng_jia_jun的博客
07-30 4550
学习完这个框架的使用后，我写了个基于MUI+React的移动端考试页面，如果需要可以clone下来查看下如何使用MUI,如果可以的话希望给个start谢谢!请注意，安装依赖于react的17.0.0及以上版本，和react-dom>=17.0.0及以上版本。材料UI设计精美，并具有一套自定义选项，可以在我们的组件之上轻松实现自己的自定义设计系统。是一个开源的React组件库，实现了Google的MaterialDesign。安装成功后就可以在组件用引用了，查看示例。......
MaterialUI中文使用指南
热门推荐
m0_37964621的博客
03-11 1万+
目录MaterialUI安装简单使用指南主要使用的组织社区地址许可证类型常用组件介绍Avatar小览属性列表样式属性 MaterialUI ReactUI组件库，用于快速构建界面和设计系统。官网默认版本为v4.11.1(截止到2021年3月11日)。 安装 支持使用npm或者使用CDN加载。 npm npm install @material-ui/core CDN 加载Roboto字体 <link rel="stylesheet" href="https://fonts.googleapis.co
material-ui_满足Material-UI —您最喜欢的新用户界面库
07-24 1448
material-uiby Code Realm 通过Code Realm 满足Material-UI —您最喜欢的新用户界面库 (Meet Material-UI — your new favorite user interface library) Update (17/05/2018): Material-UI v1.0.0 is out! Check out this post by ...
Material-UI使用
多看多听多总结
11-18 1684
1、安装 npm install @material-ui/core@next @emotion/react @emotion/styled
前端学习（3341）：ant design中Typography 排版使用
歌谣的博客
09-17 1611
import { Typography } from 'antd'; const { Title } = Typography; ReactDOM.render( <div> <Title>h1. Ant Design</Title> <Title level={2}>h2. Ant Design</Title> <Title level={3}>h3. Ant Design</Title>.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值