Material UI Typography 组件深度指南从 Roboto 字体配置到 variantMapping 语义元素映射【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui本文基于 Material UI 官方 Typography 文档页typography.md并结合 Typography 组件源码 与 createTypography 主题函数 展开。读完你将掌握Typography 组件全部 13 个 variant 的用法与默认渲染元素、Roboto 字体的两种加载方式Fontsource 与 Google CDN、通过component/variantMapping解耦「样式」与「语义元素」的完整方案、借助主题typography键直接复用文字样式以及无障碍排版的关键约束与源码级原理。1. 为什么需要 TypographyMaterial Design 的字号体系Typography 组件用于以最清晰、高效的方式呈现设计稿与内容它实现了 Material Design 的 typographic scale字号比例体系——一组经过验证、彼此协调的有限字号集合用于保证整体布局的一致性。从源码结构看这套字号体系由 createTypography 生成默认主题。其核心参数与默认值如下均可在createTheme({ typography })中覆盖参数默认值说明fontFamilyRoboto, Helvetica, Arial, sans-serif默认字体栈正是文档要求引入 Roboto 的原因fontSize14pxMaterial 规范定义的基准字号所有 variant 按比例缩放fontWeightLight / Regular / Medium / Bold300 / 400 / 500 / 700四个字重常量被各 variant 引用htmlFontSize16html元素的字号浏览器默认 16px用于 px 转 rempxToRem(size) (size / htmlFontSize) * (fontSize / 14) rempx 到 rem 的换算函数保证随fontSize基准联动allVariants无附加到所有 variant 上的公共 CSS 属性各 variant 的默认字号、字重、行高与字距letter spacing在源码中被硬编码为一份完整的映射createTypography.js 第 61–83 行const variants { h1: buildVariant(fontWeightLight, 96, 1.167, -1.5), h2: buildVariant(fontWeightLight, 60, 1.2, -0.5), h3: buildVariant(fontWeightRegular, 48, 1.167, 0), h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25), h5: buildVariant(fontWeightRegular, 24, 1.334, 0), h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15), subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15), subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1), body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15), body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15), button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps), caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4), overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps), // ... };两个值得注意的实现细节字距只在默认字体栈下生效。源码中明确注释letter spacing 是为 Roboto 字体调校的跨字体族复用会造成字距kerning问题。因此当你更换fontFamily后letterSpacing会被自动剔除createTypography.js 第 52–56 行。行高采用无单位数字如1.167遵循相对单位最佳实践使行高随字号缩放。2. Roboto 字体配置Material UI 默认使用 Roboto 字体。官方文档提供两种加载方式2.1 通过 Fontsource 安装npm install fontsource/roboto然后在入口文件entry point中按需导入字重import fontsource/roboto/300.css; import fontsource/roboto/400.css; import fontsource/roboto/500.css; import fontsource/roboto/700.css;Fontsource 支持按需加载特定字符子集、字重与字形样式。Material UI 默认 typography 配置只依赖 300、400、500、700 四个字重——这正好对应源码中的fontWeightLight/Regular/Medium/Bold常量因此默认场景下导入这四个文件即可无需引入其他字重。2.2 通过 Google Web Fonts CDN在项目的head /标签内添加link relpreconnect hrefhttps://fonts.googleapis.com / link relpreconnect hrefhttps://fonts.gstatic.com crossorigin / link relstylesheet hrefhttps://fonts.googleapis.com/css2?familyRoboto:wght300;400;500;700displayswap /CDN 方式无需安装依赖、适合快速接入Fontsource 方式将字体文件打包进项目、离线可用且更利于性能控制两种方式选其一即可。3. 组件用法全部 variant 一览Typography 提供 13 个内置 variant覆盖 Material Design 字号比例体系的每个层级。官方文档示例 Types.tsx 展示了完整用法每个 variant 均配合gutterBottom底部留白 0.35em见 Typography.js 第 94–99 行import Box from mui/material/Box; import Typography from mui/material/Typography; export default function Types() { return ( Box sx{{ width: 100%, maxWidth: 500 }} Typography varianth1 gutterBottomh1. Heading/Typography Typography varianth2 gutterBottomh2. Heading/Typography Typography varianth3 gutterBottomh3. Heading/Typography Typography varianth4 gutterBottomh4. Heading/Typography Typography varianth5 gutterBottomh5. Heading/Typography Typography varianth6 gutterBottomh6. Heading/Typography Typography variantsubtitle1 gutterBottomsubtitle1. .../Typography Typography variantsubtitle2 gutterBottomsubtitle2. .../Typography Typography variantbody1 gutterBottombody1. .../Typography Typography variantbody2 gutterBottombody2. .../Typography Typography variantbutton gutterBottom sx{{ display: block }}button text/Typography Typography variantcaption gutterBottom sx{{ display: block }}caption text/Typography Typography variantoverline gutterBottom sx{{ display: block }}overline text/Typography /Box ); }从源码看variant的默认值是body1Typography.js 第 121–131 行且 variant 的样式完全来自theme.typography中对应键值组件用Object.entries(theme.typography)动态生成样式变体因此凡是在主题里能定义的对象型 variant都能被variantprop 直接消费——这也是「添加自定义 variant」能够工作的底层机制。其他常用 prop均带默认值来自 Typography.js 的 PropTypes 定义Prop默认值说明variantbody1应用主题 typography 样式取值含 13 个内置 variant也接受自定义字符串component无回退到映射根节点使用的 HTML 元素或组件variantMappingdefaultVariantMappingvariant 到语义元素的映射表可局部覆盖aligninherit文本对齐center / inherit / justify / left / right通过 CSS 变量--Typography-textAlign生效color无支持primary / secondary / success / error / info / warning及textPrimary / textSecondary / textDisabled等调色板色gutterBottomfalsetrue时添加 0.35em 底部外边距noWrapfalsetrue时文本不换行、以省略号截断要求元素为块级或 inline-block 且有确定宽度sx无支持 MUI System 全部样式函数与主题感知属性的样式对象colorprop 同样由源码动态生成Typography.js 第 64–79 行 遍历theme.palette与theme.palette.text自动生成对应的颜色变体样式所以自定义调色板色加入主题后无需改组件即可使用。4. Theme keys不用组件时复用文字样式在某些场景例如普通div、自定义元素你可能无法直接使用 Typography 组件。此时可以直接消费主题的typography键。官方示例 TypographyTheme.tsx 演示了将theme.typography.button展开到 styled 的div上import { styled } from mui/material/styles; const Div styled(div)(({ theme }) ({ ...theme.typography.button, backgroundColor: (theme.vars || theme).palette.background.paper, padding: theme.spacing(1), })); export default function TypographyTheme() { return DivThis divs text looks like that of a button./Div; }由于theme.typography.button就是一个纯 CSS 属性对象fontFamily、fontWeight、fontSize、lineHeight、letterSpacing、textTransform等它可以被直接展开到任何样式系统styled-components、sx、CSS-in-JS中。这也解释了为什么 Typography 组件的 variant 样式「独立于语义元素」——二者共享同一份主题数据只是作用载体不同。5. 自定义5.1 添加与禁用 variant除了 13 个默认 variant你可以在主题的typography键中新增自定义 variant 或删除不需要的 variant。更完整的参数说明可参考定制文档页 customization/typography。从源码结构看这套机制能成立的根本原因是TypographyRoot的样式变体列表是运行时从theme.typography派生的Typography.js 第 58–63 行...Object.entries(theme.typography) .filter(([variant, value]) variant ! inherit value typeof value object) .map(([variant, value]) ({ props: { variant }, style: value, })),因此在主题中定义dot: { fontSize: 2rem, ... }后Typography variantdot /会自动生效测试用例中testVariantProps: { variant: dot }Typography.test.js 第 15 行验证了自定义 variant 的通用性。反过来删除某个键即禁用该 variant。5.2 改变语义元素variantMapping 与 componentTypography 用variantMappingprop 把 UI variant 关联到语义元素。理解这一点的关键是排版样式与底层语义元素相互独立——variant决定「长什么样」component决定「是什么标签」。源码中的默认映射Typography.js 第 104–116 行const defaultVariantMapping { h1: h1, h2: h2, h3: h3, h4: h4, h5: h5, h6: h6, subtitle1: h6, subtitle2: h6, body1: p, body2: p, inherit: p, };注意subtitle1/subtitle2默认渲染为h6body1/body2渲染为p。根元素的选择优先级为Typography.js 第 145–146 行const Component component || variantMapping[variant] || defaultVariantMapping[variant] || span;即componentprop 传入的variantMapping 内置默认映射 兜底span。一次性修改如避免页面出现两个h1用componentpropTypography varianth1 componenth2 h1. Heading /Typography全局修改映射通过主题的defaultPropsTypography.js 第 119 行 的useDefaultProps会让所有实例读取主题默认值这也是主题覆盖能全局生效的原因const theme createTheme({ components: { MuiTypography: { defaultProps: { variantMapping: { h1: h2, h2: h2, h3: h2, h4: h2, h5: h2, h6: h2, subtitle1: h2, subtitle2: h2, body1: span, body2: span, }, }, }, }, });测试用例印证了这一行为varianth6 variantMapping{{ h6: aside }}时根标签为aside即使传入空映射variantMapping{{}}仍会回退到内置默认映射渲染为H6Typography.test.js 第 85–105 行。5.3 sx prop使用sxprop 可以基于 MUI System 暴露的样式函数与主题感知属性快速定制任意 Typography 实例例如应用外边距Typography sx{{ m: 2 }} /官方测试验证了 sx 间距的系统化解析sx{{ mt: 2, marginRight: 5, mb: 2 }}最终计算样式为marginTop: 16px、marginRight: 40px、marginBottom: 16pxspacing 值 × 8px 倍数见 Typography.test.js 第 107–116 行。6. 无障碍Accessibility要点文档给出了可访问排版的三个关键因素颜色Color确保文本与背景之间有足够的对比度遵循 WCAG 2.2 最低推荐对比度 4.5:1。字号Font size使用相对单位 rem 而非像素以适配用户的浏览器字号设置。这一点由源码默认实现保证——pxToRem将每个 variant 的fontSize统一转换为 remcreateTypography.js 第 44–45 行用户调大浏览器基准字号时整站文字会等比放大。标题层级Heading hierarchy遵循 W3 指南不要跳过标题级别确保将语义与样式分离即上一节的component/variantMapping机制。视觉上需要 h1 样式但页面已有 h1 时应写varianth1 componenth2而不是降级使用varianth2。7. 实用类名与类名覆盖Typography 暴露了一组稳定的 utility classestypographyClasses.ts可用于 CSS 覆盖与classesprop每个 variant 对应一个类MuiTypography-root、MuiTypography-h1…MuiTypography-body2、MuiTypography-inherit、MuiTypography-button、MuiTypography-caption、MuiTypography-overline对齐状态MuiTypography-alignLeft / alignRight / alignCenter / alignJustify修饰状态MuiTypography-noWrap、MuiTypography-gutterBottom。类名按 slot 组合规则生成Typography.js 第 13–27 行root 类始终存在variant 类、align 类align不为inherit时、noWrap与gutterBottom类按条件追加。8. 小结Typography 组件的核心价值在于「样式与语义解耦」variant从主题typography读取一套经过 Material Design 调校的字号体系默认 Roboto、rem 单位、相对行高component/variantMapping独立控制语义标签二者互不干扰。结合本仓库源码可以确认的关键事实默认字号体系由 createTypography.js 定义基准fontSize: 14、默认字体栈以 Roboto 开头variant 样式运行时派生自theme.typography因此主题即扩展点加 variant、删 variant、改映射元素解析优先级为component variantMapping defaultVariantMapping spanTypography.js测试覆盖Typography.test.js验证了默认body1、全部 variant 类名、元素映射与 sx 间距解析行为。掌握以上机制后你可以独立完成项目字体接入、全局字号体系定制、单实例语义降级以及在无法使用组件的场景下复用主题排版键——这正是 Typography 文档承诺的全部技术能力并有源码与测试作为可验证依据。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Material UI Typography 组件深度指南：从 Roboto 字体配置到 variantMapping 语义元素映射
Material UI Typography 组件深度指南从 Roboto 字体配置到 variantMapping 语义元素映射【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui本文基于 Material UI 官方 Typography 文档页typography.md并结合 Typography 组件源码 与 createTypography 主题函数 展开。读完你将掌握Typography 组件全部 13 个 variant 的用法与默认渲染元素、Roboto 字体的两种加载方式Fontsource 与 Google CDN、通过component/variantMapping解耦「样式」与「语义元素」的完整方案、借助主题typography键直接复用文字样式以及无障碍排版的关键约束与源码级原理。1. 为什么需要 TypographyMaterial Design 的字号体系Typography 组件用于以最清晰、高效的方式呈现设计稿与内容它实现了 Material Design 的 typographic scale字号比例体系——一组经过验证、彼此协调的有限字号集合用于保证整体布局的一致性。从源码结构看这套字号体系由 createTypography 生成默认主题。其核心参数与默认值如下均可在createTheme({ typography })中覆盖参数默认值说明fontFamilyRoboto, Helvetica, Arial, sans-serif默认字体栈正是文档要求引入 Roboto 的原因fontSize14pxMaterial 规范定义的基准字号所有 variant 按比例缩放fontWeightLight / Regular / Medium / Bold300 / 400 / 500 / 700四个字重常量被各 variant 引用htmlFontSize16html元素的字号浏览器默认 16px用于 px 转 rempxToRem(size) (size / htmlFontSize) * (fontSize / 14) rempx 到 rem 的换算函数保证随fontSize基准联动allVariants无附加到所有 variant 上的公共 CSS 属性各 variant 的默认字号、字重、行高与字距letter spacing在源码中被硬编码为一份完整的映射createTypography.js 第 61–83 行const variants { h1: buildVariant(fontWeightLight, 96, 1.167, -1.5), h2: buildVariant(fontWeightLight, 60, 1.2, -0.5), h3: buildVariant(fontWeightRegular, 48, 1.167, 0), h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25), h5: buildVariant(fontWeightRegular, 24, 1.334, 0), h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15), subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15), subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1), body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15), body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15), button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps), caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4), overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps), // ... };两个值得注意的实现细节字距只在默认字体栈下生效。源码中明确注释letter spacing 是为 Roboto 字体调校的跨字体族复用会造成字距kerning问题。因此当你更换fontFamily后letterSpacing会被自动剔除createTypography.js 第 52–56 行。行高采用无单位数字如1.167遵循相对单位最佳实践使行高随字号缩放。2. Roboto 字体配置Material UI 默认使用 Roboto 字体。官方文档提供两种加载方式2.1 通过 Fontsource 安装npm install fontsource/roboto然后在入口文件entry point中按需导入字重import fontsource/roboto/300.css; import fontsource/roboto/400.css; import fontsource/roboto/500.css; import fontsource/roboto/700.css;Fontsource 支持按需加载特定字符子集、字重与字形样式。Material UI 默认 typography 配置只依赖 300、400、500、700 四个字重——这正好对应源码中的fontWeightLight/Regular/Medium/Bold常量因此默认场景下导入这四个文件即可无需引入其他字重。2.2 通过 Google Web Fonts CDN在项目的head /标签内添加link relpreconnect hrefhttps://fonts.googleapis.com / link relpreconnect hrefhttps://fonts.gstatic.com crossorigin / link relstylesheet hrefhttps://fonts.googleapis.com/css2?familyRoboto:wght300;400;500;700displayswap /CDN 方式无需安装依赖、适合快速接入Fontsource 方式将字体文件打包进项目、离线可用且更利于性能控制两种方式选其一即可。3. 组件用法全部 variant 一览Typography 提供 13 个内置 variant覆盖 Material Design 字号比例体系的每个层级。官方文档示例 Types.tsx 展示了完整用法每个 variant 均配合gutterBottom底部留白 0.35em见 Typography.js 第 94–99 行import Box from mui/material/Box; import Typography from mui/material/Typography; export default function Types() { return ( Box sx{{ width: 100%, maxWidth: 500 }} Typography varianth1 gutterBottomh1. Heading/Typography Typography varianth2 gutterBottomh2. Heading/Typography Typography varianth3 gutterBottomh3. Heading/Typography Typography varianth4 gutterBottomh4. Heading/Typography Typography varianth5 gutterBottomh5. Heading/Typography Typography varianth6 gutterBottomh6. Heading/Typography Typography variantsubtitle1 gutterBottomsubtitle1. .../Typography Typography variantsubtitle2 gutterBottomsubtitle2. .../Typography Typography variantbody1 gutterBottombody1. .../Typography Typography variantbody2 gutterBottombody2. .../Typography Typography variantbutton gutterBottom sx{{ display: block }}button text/Typography Typography variantcaption gutterBottom sx{{ display: block }}caption text/Typography Typography variantoverline gutterBottom sx{{ display: block }}overline text/Typography /Box ); }从源码看variant的默认值是body1Typography.js 第 121–131 行且 variant 的样式完全来自theme.typography中对应键值组件用Object.entries(theme.typography)动态生成样式变体因此凡是在主题里能定义的对象型 variant都能被variantprop 直接消费——这也是「添加自定义 variant」能够工作的底层机制。其他常用 prop均带默认值来自 Typography.js 的 PropTypes 定义Prop默认值说明variantbody1应用主题 typography 样式取值含 13 个内置 variant也接受自定义字符串component无回退到映射根节点使用的 HTML 元素或组件variantMappingdefaultVariantMappingvariant 到语义元素的映射表可局部覆盖aligninherit文本对齐center / inherit / justify / left / right通过 CSS 变量--Typography-textAlign生效color无支持primary / secondary / success / error / info / warning及textPrimary / textSecondary / textDisabled等调色板色gutterBottomfalsetrue时添加 0.35em 底部外边距noWrapfalsetrue时文本不换行、以省略号截断要求元素为块级或 inline-block 且有确定宽度sx无支持 MUI System 全部样式函数与主题感知属性的样式对象colorprop 同样由源码动态生成Typography.js 第 64–79 行 遍历theme.palette与theme.palette.text自动生成对应的颜色变体样式所以自定义调色板色加入主题后无需改组件即可使用。4. Theme keys不用组件时复用文字样式在某些场景例如普通div、自定义元素你可能无法直接使用 Typography 组件。此时可以直接消费主题的typography键。官方示例 TypographyTheme.tsx 演示了将theme.typography.button展开到 styled 的div上import { styled } from mui/material/styles; const Div styled(div)(({ theme }) ({ ...theme.typography.button, backgroundColor: (theme.vars || theme).palette.background.paper, padding: theme.spacing(1), })); export default function TypographyTheme() { return DivThis divs text looks like that of a button./Div; }由于theme.typography.button就是一个纯 CSS 属性对象fontFamily、fontWeight、fontSize、lineHeight、letterSpacing、textTransform等它可以被直接展开到任何样式系统styled-components、sx、CSS-in-JS中。这也解释了为什么 Typography 组件的 variant 样式「独立于语义元素」——二者共享同一份主题数据只是作用载体不同。5. 自定义5.1 添加与禁用 variant除了 13 个默认 variant你可以在主题的typography键中新增自定义 variant 或删除不需要的 variant。更完整的参数说明可参考定制文档页 customization/typography。从源码结构看这套机制能成立的根本原因是TypographyRoot的样式变体列表是运行时从theme.typography派生的Typography.js 第 58–63 行...Object.entries(theme.typography) .filter(([variant, value]) variant ! inherit value typeof value object) .map(([variant, value]) ({ props: { variant }, style: value, })),因此在主题中定义dot: { fontSize: 2rem, ... }后Typography variantdot /会自动生效测试用例中testVariantProps: { variant: dot }Typography.test.js 第 15 行验证了自定义 variant 的通用性。反过来删除某个键即禁用该 variant。5.2 改变语义元素variantMapping 与 componentTypography 用variantMappingprop 把 UI variant 关联到语义元素。理解这一点的关键是排版样式与底层语义元素相互独立——variant决定「长什么样」component决定「是什么标签」。源码中的默认映射Typography.js 第 104–116 行const defaultVariantMapping { h1: h1, h2: h2, h3: h3, h4: h4, h5: h5, h6: h6, subtitle1: h6, subtitle2: h6, body1: p, body2: p, inherit: p, };注意subtitle1/subtitle2默认渲染为h6body1/body2渲染为p。根元素的选择优先级为Typography.js 第 145–146 行const Component component || variantMapping[variant] || defaultVariantMapping[variant] || span;即componentprop 传入的variantMapping 内置默认映射 兜底span。一次性修改如避免页面出现两个h1用componentpropTypography varianth1 componenth2 h1. Heading /Typography全局修改映射通过主题的defaultPropsTypography.js 第 119 行 的useDefaultProps会让所有实例读取主题默认值这也是主题覆盖能全局生效的原因const theme createTheme({ components: { MuiTypography: { defaultProps: { variantMapping: { h1: h2, h2: h2, h3: h2, h4: h2, h5: h2, h6: h2, subtitle1: h2, subtitle2: h2, body1: span, body2: span, }, }, }, }, });测试用例印证了这一行为varianth6 variantMapping{{ h6: aside }}时根标签为aside即使传入空映射variantMapping{{}}仍会回退到内置默认映射渲染为H6Typography.test.js 第 85–105 行。5.3 sx prop使用sxprop 可以基于 MUI System 暴露的样式函数与主题感知属性快速定制任意 Typography 实例例如应用外边距Typography sx{{ m: 2 }} /官方测试验证了 sx 间距的系统化解析sx{{ mt: 2, marginRight: 5, mb: 2 }}最终计算样式为marginTop: 16px、marginRight: 40px、marginBottom: 16pxspacing 值 × 8px 倍数见 Typography.test.js 第 107–116 行。6. 无障碍Accessibility要点文档给出了可访问排版的三个关键因素颜色Color确保文本与背景之间有足够的对比度遵循 WCAG 2.2 最低推荐对比度 4.5:1。字号Font size使用相对单位 rem 而非像素以适配用户的浏览器字号设置。这一点由源码默认实现保证——pxToRem将每个 variant 的fontSize统一转换为 remcreateTypography.js 第 44–45 行用户调大浏览器基准字号时整站文字会等比放大。标题层级Heading hierarchy遵循 W3 指南不要跳过标题级别确保将语义与样式分离即上一节的component/variantMapping机制。视觉上需要 h1 样式但页面已有 h1 时应写varianth1 componenth2而不是降级使用varianth2。7. 实用类名与类名覆盖Typography 暴露了一组稳定的 utility classestypographyClasses.ts可用于 CSS 覆盖与classesprop每个 variant 对应一个类MuiTypography-root、MuiTypography-h1…MuiTypography-body2、MuiTypography-inherit、MuiTypography-button、MuiTypography-caption、MuiTypography-overline对齐状态MuiTypography-alignLeft / alignRight / alignCenter / alignJustify修饰状态MuiTypography-noWrap、MuiTypography-gutterBottom。类名按 slot 组合规则生成Typography.js 第 13–27 行root 类始终存在variant 类、align 类align不为inherit时、noWrap与gutterBottom类按条件追加。8. 小结Typography 组件的核心价值在于「样式与语义解耦」variant从主题typography读取一套经过 Material Design 调校的字号体系默认 Roboto、rem 单位、相对行高component/variantMapping独立控制语义标签二者互不干扰。结合本仓库源码可以确认的关键事实默认字号体系由 createTypography.js 定义基准fontSize: 14、默认字体栈以 Roboto 开头variant 样式运行时派生自theme.typography因此主题即扩展点加 variant、删 variant、改映射元素解析优先级为component variantMapping defaultVariantMapping spanTypography.js测试覆盖Typography.test.js验证了默认body1、全部 variant 类名、元素映射与 sx 间距解析行为。掌握以上机制后你可以独立完成项目字体接入、全局字号体系定制、单实例语义降级以及在无法使用组件的场景下复用主题排版键——这正是 Typography 文档承诺的全部技术能力并有源码与测试作为可验证依据。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考