Material UI Divider 完全指南变体、垂直分隔线、嵌入文本与可访问性实践【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-uiMaterial UI 的Divider组件用一条纤细、不抢眼的线条将内容分组从而强化页面的视觉层级。本文基于仓库中的官方文档 dividers.md 与组件源码 Divider.js系统讲解它的三种变体、水平/垂直方向、flex 布局适配、文本嵌入写法以及可访问性ARIA处理策略。读完后你将掌握 Divider 的全部 Props、默认值与渲染元素规则并能在列表、工具栏图标分组、卡片分区等真实场景中使用它。基础引入与默认渲染引入方式很简单支持按路径独立导入有助于打包器做 tree-shakingimport Divider from mui/material/Divider;Divider默认渲染为一条深灰色的hr元素并附带几个常用的 Props 供快速调整样式。其 DOM 结构如下见官方文档 Anatomy 一节hr classMuiDivider-root !-- Divider children goes here -- /hr源码 Divider.js 中根节点的基础样式为{ margin: 0, // Reset browser default style. flexShrink: 0, borderWidth: 0, borderStyle: solid, borderColor: (theme.vars || theme).palette.divider, borderBottomWidth: thin, }可以看到分隔线的颜色取自主题中的palette.divider即深灰色的来源同时重置了浏览器hr的默认外边距。官方示例 IntroDivider.tsx 展示了在Card内用Divider /分隔商品标题区与操作区的最常见用法。Props 一览综合 Divider.js 中的默认值与 PropTypes 定义Prop类型默认值说明absolutebooleanfalse绝对定位到父容器底部childrenReactNode—包裹在分隔线中的文本/图标等节点classNamestring—附加根节点类名componentElementType动态计算根节点使用的元素详见下文flexItembooleanfalse用于 flex 容器中的正确高度orientationhorizontal \| verticalhorizontal分隔线方向rolestring动态计算ARIA 角色详见可访问性一节textAligncenter \| left \| rightcenter嵌入内容的对齐方式variantfullWidth \| inset \| middlefullWidth分隔线变体sxobject / array / function—系统样式 prop其中component与role的默认值由源码动态推导Divider.jscomponent children || orientation vertical ? div : hr, role component ! hr ? separator : undefined,即只要分隔线有子节点或处于垂直方向根元素就自动从hr切换为div并补上separator角色——这正是它遵守 WAI-ARIA 分隔符separator规范的核心机制后文会详述。三种 variant 变体Divider支持fullWidth默认、inset、middle三种变体各自对应的样式在源码中通过 variants 定义variant视觉效果源码样式Divider.jsfullWidth贯穿整个容器宽度无额外样式默认borderBottomWidth: thininset左侧内缩常用于列表右侧对齐场景marginLeft: 72middle两端留出间隙水平方向marginLeft/Right: theme.spacing(2)即 16px垂直方向marginTop/Bottom: theme.spacing(1)即 8pxmiddle的间距值在测试 Divider.test.js 中有精确断言水平时计算样式为16px垂直时上下各8px。官方示例 DividerVariants.tsx 在List中并排演示了三种变体import List from mui/material/List; import ListItem from mui/material/ListItem; import ListItemText from mui/material/ListItemText; import Divider from mui/material/Divider; export default function DividerVariants() { return ( List sx{style} ListItem ListItemText primaryFull width variant below / /ListItem Divider componentli / ListItem ListItemText primaryInset variant below / /ListItem Divider variantinset componentli / ListItem ListItemText primaryMiddle variant below / /ListItem Divider variantmiddle componentli / ListItem ListItemText primaryList item / /ListItem /List ); }注意示例中每个Divider都带componentli原因在于下一节与 List 搭配使用中说明。此外还有一个未在变体之列但同样重要的 propabsolute。它在源码中对应Divider.js{ position: absolute, bottom: 0, left: 0, width: 100%, }适合把分隔线钉在父容器底边例如卡片底部。orientation从水平到垂直orientationprop 用于把分隔线从水平改为垂直。官方文档指出使用垂直方向时Divider 会渲染带相应可访问性属性的div而不是hr以遵守 WAI-ARIA 规范。这一点与源码中的默认值推导一致——orientation vertical时component自动落到div。垂直方向的样式差异Divider.js{ height: 100%, borderBottomWidth: 0, borderRightWidth: thin, // 线条从下边框换到右边框 }同时aria-orientation属性的输出条件为Divider.jsaria-orientation{ role separator (component ! hr || orientation vertical) ? orientation : undefined }即只有当元素承担了separator角色且不是纯hr水平分隔线时才输出aria-orientation避免给hr冗余地叠加隐式语义这一点被测试 avoids adding implicit aria semantics 明确验证见 Divider.test.js。官方示例 VerticalDividers.tsx 展示了在工具栏中用垂直分隔线隔开两组图标Box sx{{ display: flex, alignItems: center, /* ... 容器样式 ... */ [ .${dividerClasses.root}]: { mx: 0.5 }, }} FormatAlignLeftIcon / FormatAlignCenterIcon / FormatAlignRightIcon / Divider orientationvertical flexItem / FormatBoldIcon / /Box这里用到了具名导出的dividerClasses在 index.d.ts 中导出可以通过dividerClasses.root精确选中根节点类名做外层样式调整。flexItemflex 容器中的高度问题垂直分隔线作为 flex 容器子项时默认的height: 100%可能计算为0px。flexItemprop 就是为解决此问题而设其样式为Divider.js{ alignSelf: stretch, height: auto, }官方示例 FlexDivider.tsx 完整代码import FormatBoldIcon from mui/icons-material/FormatBold; import FormatItalicIcon from mui/icons-material/FormatItalic; import Box from mui/material/Box; import Divider from mui/material/Divider; export default function FlexDivider() { return ( Box sx{{ display: inline-flex, alignItems: center, /* ... 容器边框、背景等样式 ... */ svg: { m: 1 }, }} FormatBoldIcon / Divider orientationvertical variantmiddle flexItem / FormatItalicIcon / /Box ); }variantmiddle让垂直线上下各留spacing(1)的间隙flexItem保证它撑满工具栏高度两者组合即典型的图标工具栏分隔形态。带 children在分隔线中嵌入文本或 Chip给Divider传入children后根元素自动变为div见前文component默认值推导内容被包裹进一个spanDividerWrapper而分隔线本身改由::before与::after伪元素绘制。核心样式Divider.js// 有 children 时 { display: flex, textAlign: center, border: 0, borderTopStyle: solid, borderLeftStyle: solid, ::before, ::after: { content: , alignSelf: center, }, } // 水平方向伪元素画上下两条水平线 ::before, ::after: { width: 100%, borderTop: thin solid ${(theme.vars || theme).palette.divider}, borderTopStyle: inherit, } // 垂直方向改画左右两条垂直线 ::before, ::after: { height: 100%, borderLeft: thin solid ${(theme.vars || theme).palette.divider}, borderLeftStyle: inherit, }由于线条走的是伪元素的border-top-style: inherit垂直方向为border-left-style: inherit用styled或sx覆盖borderStyle如改为dashed即可让伪元素线条同步生效——测试 custom border styleDivider.test.js专门验证了这一继承行为。textAlign 对齐textAlignprop 控制嵌入内容的水平位置默认center仅对水平方向有效。实现方式是调节两条伪元素线段的宽度Divider.jstextAlign::before宽度::after宽度center默认100%100%left10%90%right90%10%源码中textAlignLeft/textAlignRight类只在orientation ! vertical时才附加Divider.js测试 should not set the textAlignRight class if orientationvertical 对此有明确断言。官方示例 DividerText.tsx 演示了居中、左对齐、右对齐及嵌入Chip的完整形态DividerCENTER/Divider Divider textAlignleftLEFT/Divider Divider textAlignrightRIGHT/Divider Divider Chip labelChip sizesmall / /Dividerwrapper节点span自带whiteSpace: nowrap和基于theme.spacing(1) * 1.2的内边距垂直方向时内边距换到上下方向保证文本不会被线条压住。定制与组合场景与 List 搭配使用在List中用Divider分隔条目时必须通过componentprop 把它渲染为li否则hr出现在ul内不是合法的 HTML 结构。官方示例 ListDividers.tsxList sx{style} aria-labelmailbox folders ListItem ListItemText primaryInbox / /ListItem Divider componentli / ListItem ListItemText primaryDrafts / /ListItem {/* ... 其余条目与 Divider 结构相同 ... */} /List渲染为li后component ! hr组件会自动补上roleseparator与aria-orientation语义依然完整测试 adds a proper role if none is specified 验证了该行为见 Divider.test.js。图标分组垂直 middle将variantmiddle与orientationvertical组合可以在图标工具栏中制造一个带上下留白的分隔段。官方示例 VerticalDividerMiddle.tsxCard variantoutlined sx{{ display: flex, color: text.secondary, svg: { m: 1 }, [ .${dividerClasses.root}]: { mx: 0.5 }, }} FormatAlignLeftIcon / FormatAlignCenterIcon / FormatAlignRightIcon / Divider orientationvertical variantmiddle flexItem / FormatBoldIcon / /Card样式覆盖与全局默认值通过dividerClasses选择器或overrides: { MuiDivider: { root / inset / middle / vertical / flexItem / withChildren / ... } }主题 API 可覆盖任意槽位样式各工具类名与条件一一对应定义见 dividerClasses.tsroot、absolute、fullWidth、inset、middle、vertical、flexItem、withChildren、textAlignRight、textAlignLeft、wrapper、wrapperVertical。组件内部通过useDefaultProps({ props: inProps, name: MuiDivider })读取DefaultPropsProvider注入的全局默认 propsDivider.js因此可以为应用内所有Divider统一设置默认值如全局flexItem或orientation。所有颜色均来自theme.palette.divider自定义主题色只需改这一处水平/垂直、有无 children 的伪元素线条都会跟随变化。可访问性Accessibility由于hr的隐式角色是separator默认水平的Divider会被屏幕阅读器朗读为 Horizontal Splitter使用orientationvertical时则为 Vertical。官方文档给出两条实用建议1. 纯装饰用途让屏幕阅读器直接跳过Divider aria-hiddentrue /2. 包裹其他元素文本、Chip 等改为普通 div 并声明 presentation 角色Divider componentdiv rolepresentation TypographyText element/Typography /Divider这样屏幕阅读器不会朗读分隔线本身但其中包裹元素的语义得以保留。源码侧对role的处理策略与测试用例Divider.test.js共同确认了四个行为默认hr水平分隔线不额外输出role与aria-orientation避免叠加隐式语义显式componentdiv且未指定 role 时自动补roleseparator与aria-orientationorientationvertical时同样自动补齐 ARIA 属性用户显式传入的role如presentation优先级最高会覆盖推导值且不再输出aria-orientation。小结Divider的 API 表面简洁约 10 个 props但默认值逻辑相当讲究component与role会依据children、orientation动态推导垂直方向与带文本场景自动切换到div separator的 ARIA 合规形态variant、flexItem、textAlign则分别解决内缩/留白、flex 高度、内容对齐三类布局问题。掌握 Divider.js 中元素推导 → 工具类组装dividerClasses.ts→ 主题变体样式这条链路再配合 Divider.test.js 中的行为断言即可在列表、工具栏、卡片等场景中准确、无障碍地使用它。【免费下载链接】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 Divider 完全指南：变体、垂直分隔线、嵌入文本与可访问性实践
Material UI Divider 完全指南变体、垂直分隔线、嵌入文本与可访问性实践【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-uiMaterial UI 的Divider组件用一条纤细、不抢眼的线条将内容分组从而强化页面的视觉层级。本文基于仓库中的官方文档 dividers.md 与组件源码 Divider.js系统讲解它的三种变体、水平/垂直方向、flex 布局适配、文本嵌入写法以及可访问性ARIA处理策略。读完后你将掌握 Divider 的全部 Props、默认值与渲染元素规则并能在列表、工具栏图标分组、卡片分区等真实场景中使用它。基础引入与默认渲染引入方式很简单支持按路径独立导入有助于打包器做 tree-shakingimport Divider from mui/material/Divider;Divider默认渲染为一条深灰色的hr元素并附带几个常用的 Props 供快速调整样式。其 DOM 结构如下见官方文档 Anatomy 一节hr classMuiDivider-root !-- Divider children goes here -- /hr源码 Divider.js 中根节点的基础样式为{ margin: 0, // Reset browser default style. flexShrink: 0, borderWidth: 0, borderStyle: solid, borderColor: (theme.vars || theme).palette.divider, borderBottomWidth: thin, }可以看到分隔线的颜色取自主题中的palette.divider即深灰色的来源同时重置了浏览器hr的默认外边距。官方示例 IntroDivider.tsx 展示了在Card内用Divider /分隔商品标题区与操作区的最常见用法。Props 一览综合 Divider.js 中的默认值与 PropTypes 定义Prop类型默认值说明absolutebooleanfalse绝对定位到父容器底部childrenReactNode—包裹在分隔线中的文本/图标等节点classNamestring—附加根节点类名componentElementType动态计算根节点使用的元素详见下文flexItembooleanfalse用于 flex 容器中的正确高度orientationhorizontal \| verticalhorizontal分隔线方向rolestring动态计算ARIA 角色详见可访问性一节textAligncenter \| left \| rightcenter嵌入内容的对齐方式variantfullWidth \| inset \| middlefullWidth分隔线变体sxobject / array / function—系统样式 prop其中component与role的默认值由源码动态推导Divider.jscomponent children || orientation vertical ? div : hr, role component ! hr ? separator : undefined,即只要分隔线有子节点或处于垂直方向根元素就自动从hr切换为div并补上separator角色——这正是它遵守 WAI-ARIA 分隔符separator规范的核心机制后文会详述。三种 variant 变体Divider支持fullWidth默认、inset、middle三种变体各自对应的样式在源码中通过 variants 定义variant视觉效果源码样式Divider.jsfullWidth贯穿整个容器宽度无额外样式默认borderBottomWidth: thininset左侧内缩常用于列表右侧对齐场景marginLeft: 72middle两端留出间隙水平方向marginLeft/Right: theme.spacing(2)即 16px垂直方向marginTop/Bottom: theme.spacing(1)即 8pxmiddle的间距值在测试 Divider.test.js 中有精确断言水平时计算样式为16px垂直时上下各8px。官方示例 DividerVariants.tsx 在List中并排演示了三种变体import List from mui/material/List; import ListItem from mui/material/ListItem; import ListItemText from mui/material/ListItemText; import Divider from mui/material/Divider; export default function DividerVariants() { return ( List sx{style} ListItem ListItemText primaryFull width variant below / /ListItem Divider componentli / ListItem ListItemText primaryInset variant below / /ListItem Divider variantinset componentli / ListItem ListItemText primaryMiddle variant below / /ListItem Divider variantmiddle componentli / ListItem ListItemText primaryList item / /ListItem /List ); }注意示例中每个Divider都带componentli原因在于下一节与 List 搭配使用中说明。此外还有一个未在变体之列但同样重要的 propabsolute。它在源码中对应Divider.js{ position: absolute, bottom: 0, left: 0, width: 100%, }适合把分隔线钉在父容器底边例如卡片底部。orientation从水平到垂直orientationprop 用于把分隔线从水平改为垂直。官方文档指出使用垂直方向时Divider 会渲染带相应可访问性属性的div而不是hr以遵守 WAI-ARIA 规范。这一点与源码中的默认值推导一致——orientation vertical时component自动落到div。垂直方向的样式差异Divider.js{ height: 100%, borderBottomWidth: 0, borderRightWidth: thin, // 线条从下边框换到右边框 }同时aria-orientation属性的输出条件为Divider.jsaria-orientation{ role separator (component ! hr || orientation vertical) ? orientation : undefined }即只有当元素承担了separator角色且不是纯hr水平分隔线时才输出aria-orientation避免给hr冗余地叠加隐式语义这一点被测试 avoids adding implicit aria semantics 明确验证见 Divider.test.js。官方示例 VerticalDividers.tsx 展示了在工具栏中用垂直分隔线隔开两组图标Box sx{{ display: flex, alignItems: center, /* ... 容器样式 ... */ [ .${dividerClasses.root}]: { mx: 0.5 }, }} FormatAlignLeftIcon / FormatAlignCenterIcon / FormatAlignRightIcon / Divider orientationvertical flexItem / FormatBoldIcon / /Box这里用到了具名导出的dividerClasses在 index.d.ts 中导出可以通过dividerClasses.root精确选中根节点类名做外层样式调整。flexItemflex 容器中的高度问题垂直分隔线作为 flex 容器子项时默认的height: 100%可能计算为0px。flexItemprop 就是为解决此问题而设其样式为Divider.js{ alignSelf: stretch, height: auto, }官方示例 FlexDivider.tsx 完整代码import FormatBoldIcon from mui/icons-material/FormatBold; import FormatItalicIcon from mui/icons-material/FormatItalic; import Box from mui/material/Box; import Divider from mui/material/Divider; export default function FlexDivider() { return ( Box sx{{ display: inline-flex, alignItems: center, /* ... 容器边框、背景等样式 ... */ svg: { m: 1 }, }} FormatBoldIcon / Divider orientationvertical variantmiddle flexItem / FormatItalicIcon / /Box ); }variantmiddle让垂直线上下各留spacing(1)的间隙flexItem保证它撑满工具栏高度两者组合即典型的图标工具栏分隔形态。带 children在分隔线中嵌入文本或 Chip给Divider传入children后根元素自动变为div见前文component默认值推导内容被包裹进一个spanDividerWrapper而分隔线本身改由::before与::after伪元素绘制。核心样式Divider.js// 有 children 时 { display: flex, textAlign: center, border: 0, borderTopStyle: solid, borderLeftStyle: solid, ::before, ::after: { content: , alignSelf: center, }, } // 水平方向伪元素画上下两条水平线 ::before, ::after: { width: 100%, borderTop: thin solid ${(theme.vars || theme).palette.divider}, borderTopStyle: inherit, } // 垂直方向改画左右两条垂直线 ::before, ::after: { height: 100%, borderLeft: thin solid ${(theme.vars || theme).palette.divider}, borderLeftStyle: inherit, }由于线条走的是伪元素的border-top-style: inherit垂直方向为border-left-style: inherit用styled或sx覆盖borderStyle如改为dashed即可让伪元素线条同步生效——测试 custom border styleDivider.test.js专门验证了这一继承行为。textAlign 对齐textAlignprop 控制嵌入内容的水平位置默认center仅对水平方向有效。实现方式是调节两条伪元素线段的宽度Divider.jstextAlign::before宽度::after宽度center默认100%100%left10%90%right90%10%源码中textAlignLeft/textAlignRight类只在orientation ! vertical时才附加Divider.js测试 should not set the textAlignRight class if orientationvertical 对此有明确断言。官方示例 DividerText.tsx 演示了居中、左对齐、右对齐及嵌入Chip的完整形态DividerCENTER/Divider Divider textAlignleftLEFT/Divider Divider textAlignrightRIGHT/Divider Divider Chip labelChip sizesmall / /Dividerwrapper节点span自带whiteSpace: nowrap和基于theme.spacing(1) * 1.2的内边距垂直方向时内边距换到上下方向保证文本不会被线条压住。定制与组合场景与 List 搭配使用在List中用Divider分隔条目时必须通过componentprop 把它渲染为li否则hr出现在ul内不是合法的 HTML 结构。官方示例 ListDividers.tsxList sx{style} aria-labelmailbox folders ListItem ListItemText primaryInbox / /ListItem Divider componentli / ListItem ListItemText primaryDrafts / /ListItem {/* ... 其余条目与 Divider 结构相同 ... */} /List渲染为li后component ! hr组件会自动补上roleseparator与aria-orientation语义依然完整测试 adds a proper role if none is specified 验证了该行为见 Divider.test.js。图标分组垂直 middle将variantmiddle与orientationvertical组合可以在图标工具栏中制造一个带上下留白的分隔段。官方示例 VerticalDividerMiddle.tsxCard variantoutlined sx{{ display: flex, color: text.secondary, svg: { m: 1 }, [ .${dividerClasses.root}]: { mx: 0.5 }, }} FormatAlignLeftIcon / FormatAlignCenterIcon / FormatAlignRightIcon / Divider orientationvertical variantmiddle flexItem / FormatBoldIcon / /Card样式覆盖与全局默认值通过dividerClasses选择器或overrides: { MuiDivider: { root / inset / middle / vertical / flexItem / withChildren / ... } }主题 API 可覆盖任意槽位样式各工具类名与条件一一对应定义见 dividerClasses.tsroot、absolute、fullWidth、inset、middle、vertical、flexItem、withChildren、textAlignRight、textAlignLeft、wrapper、wrapperVertical。组件内部通过useDefaultProps({ props: inProps, name: MuiDivider })读取DefaultPropsProvider注入的全局默认 propsDivider.js因此可以为应用内所有Divider统一设置默认值如全局flexItem或orientation。所有颜色均来自theme.palette.divider自定义主题色只需改这一处水平/垂直、有无 children 的伪元素线条都会跟随变化。可访问性Accessibility由于hr的隐式角色是separator默认水平的Divider会被屏幕阅读器朗读为 Horizontal Splitter使用orientationvertical时则为 Vertical。官方文档给出两条实用建议1. 纯装饰用途让屏幕阅读器直接跳过Divider aria-hiddentrue /2. 包裹其他元素文本、Chip 等改为普通 div 并声明 presentation 角色Divider componentdiv rolepresentation TypographyText element/Typography /Divider这样屏幕阅读器不会朗读分隔线本身但其中包裹元素的语义得以保留。源码侧对role的处理策略与测试用例Divider.test.js共同确认了四个行为默认hr水平分隔线不额外输出role与aria-orientation避免叠加隐式语义显式componentdiv且未指定 role 时自动补roleseparator与aria-orientationorientationvertical时同样自动补齐 ARIA 属性用户显式传入的role如presentation优先级最高会覆盖推导值且不再输出aria-orientation。小结Divider的 API 表面简洁约 10 个 props但默认值逻辑相当讲究component与role会依据children、orientation动态推导垂直方向与带文本场景自动切换到div separator的 ARIA 合规形态variant、flexItem、textAlign则分别解决内缩/留白、flex 高度、内容对齐三类布局问题。掌握 Divider.js 中元素推导 → 工具类组装dividerClasses.ts→ 主题变体样式这条链路再配合 Divider.test.js 中的行为断言即可在列表、工具栏、卡片等场景中准确、无障碍地使用它。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考