Material-UI Accordion从零到嵌套面板的完整上手指南【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui一句话先说清楚Accordion 是 Material-UI 里的可折叠卡片——点标题展开内容再点一次收起专门用来在不牺牲页面整洁的前提下塞进更多长内容。本文带你从最小示例一路写到受控联动和嵌套结构读完就能直接用在 FAQ、设置页这类场景里。组件拆解四个角色各管什么 Accordion 不是单个组件而是一套分工明确的组合可以把它理解成一张卡片被拆成了四个位置组件角色职责Accordion容器持有展开/收起状态负责整个面板的边框与分隔线AccordionSummary标题区实际是一个可点击的按钮承载标题文字和展开图标AccordionDetails内容区包裹展开后显示的内容自带内边距AccordionActions操作区可选放在内容下方挂取消、确认这类按钮渲染出来的 DOM 大致是外层一个MuiAccordion-root的 div里面先是一个h3包着 Summary 按钮再是一个roleregion的 div 包着 Details。所以标题默认是 h3后面避坑一节会提到怎么调整。快速跑通Accordion 最小示例 ⚡安装依赖npm install mui/material mui/icons-material三个组件加一个图标就是一个能跑的折叠面板import Accordion from mui/material/Accordion; import AccordionSummary from mui/material/AccordionSummary; import AccordionDetails from mui/material/AccordionDetails; import Typography from mui/material/Typography; import ExpandMoreIcon from mui/icons-material/ExpandMore; export default function ShippingPanel() { return ( Accordion AccordionSummary expandIcon{ExpandMoreIcon /} Typography运费政策/Typography /AccordionSummary AccordionDetails Typography订单满 199 元免运费常规快递 3 到 5 个工作日送达。/Typography /AccordionDetails /Accordion ); }逐段说下Accordion是第一子级必须是AccordionSummary它俩的嵌套关系不能乱expandIcon传入的图标展开时会自动翻转 180°不需要你写任何旋转逻辑AccordionDetails里放任意内容纯文本或一组表单都行。配置速查Accordion 常用属性 ️属性位置作用默认值defaultExpandedAccordion初始就展开属于非受控用法falseexpandedAccordion受控开关传入即接管状态-onChangeAccordion状态变化回调签名是(event, isExpanded)-disabledAccordion禁用点击与键盘聚焦背景变灰falsedisableGuttersAccordion展开时不撑出上下外边距falsesquareAccordion去掉圆角常和disableGutters搭配做列表样式falseexpandIconAccordionSummary更换展开指示图标-disabled的最小写法Accordion disabled AccordionSummary Typography维护中暂不可用/Typography /AccordionSummary AccordionDetails Typography该功能正在升级/Typography /AccordionDetails /Accordion面板会整体变成禁用配色点击和 Tab 聚焦都会失效适合占位但不让碰的场景。状态与联动如何做到一次只展开一个 不传expanded时每个面板自己管自己的状态可以随便多开。想要互斥的 FAQ 效果就把状态提到父组件import * as React from react; export default function FaqList() { const [expanded, setExpanded] React.useState(shipping); const handleChange (panel) (event, isExpanded) { // 展开时记录面板 id收起时清空天然实现互斥 setExpanded(isExpanded ? panel : false); }; return ( div Accordion expanded{expanded shipping} onChange{handleChange(shipping)} {/* Summary / Details 同最小示例 */} /Accordion Accordion expanded{expanded returns} onChange{handleChange(returns)} {/* Summary / Details 同最小示例 */} /Accordion /div ); }关键就是那行setExpanded(isExpanded ? panel : false)展开时存面板标识点击已展开的面板收起时置回false于是永远只有一个开着。想反过来支持多个同时开把状态改成数组展开时 push、收起时 filter 即可。组合玩法嵌套与多实例面板 Accordion 内部再放 Accordion 完全合法常用于分类 → 子项的层级内容Accordion defaultExpanded AccordionSummary Typography订单管理/Typography /AccordionSummary AccordionDetails Accordion AccordionSummary Typography查看物流/Typography /AccordionSummary AccordionDetails Typography包裹 SF1024567 已到深圳转运中心。/Typography /AccordionDetails /Accordion Accordion AccordionSummary Typography申请售后/Typography /AccordionSummary AccordionDetails Typography支持 7 天无理由退换运费到付。/Typography /AccordionDetails /Accordion /AccordionDetails /Accordion外层和内层各自独立控制展开状态互不干扰。另外当你把多个平级 Accordion 直接堆在同一个容器里时相邻面板之间会自动出现一条细分隔线首个面板的上边线除外这就是 Material 风格面板组的来源不需要额外加 border。体验打磨动效、性能与无障碍 动效。默认过渡用的是Collapse高度动画。想换成淡入淡出通过slots和slotProps替换过渡组件Accordion expanded{expanded} onChange{(event, isExpanded) setExpanded(isExpanded)} slots{{ transition: Fade }} slotProps{{ transition: { timeout: 400 } }} /性能。面板内容默认即使收起也挂在 DOM 里——这是为 SSR 和 SEO 考虑。如果 Details 里是很重的组件树、或者同页有几十个面板建议收起时直接卸载Accordion slotProps{{ transition: { unmountOnExit: true } }} /无障碍。WAI-ARIA 要求折叠标题与内容建立id/aria-controls关联。你只需要在AccordionSummary上写这一对Accordion会自动为内容区补上反向的aria-labelledbyAccordion AccordionSummary idfaq-1-header aria-controlsfaq-1-content Typography发票抬头怎么修改/Typography /AccordionSummary AccordionDetails Typography在设置页的账户信息里修改。/Typography /AccordionDetails /Accordion避坑新手高频问题 第一个子元素必须是 AccordionSummary。传 Fragment 或别的元素会直接报错Expected the first child of Accordion to be a valid element检查下 JSX 结构。expanded和defaultExpanded别混用。传了expanded组件就是受控模式defaultExpanded不再起作用还会触发受控/非受控切换的警告。忘记在 onChange 里同步状态。受控模式下组件不会自己改状态setExpanded没接上就会出现点了没反应。标题层级不对。Summary 外层默认渲染h3如果你的页面结构里它应该是 h4用slotProps{{ heading: { component: h4 } }}调整别手动包一层标签。图标不旋转这是好事情——expandIcon的翻转动画是组件内置的你手写 transform 反而会冲突。延伸资源 项目内可以直接打开这些文件对照源码看官方文档页docs/data/material/components/accordion/accordion.md组件源码packages/mui-material/src/Accordion受控多面板示例docs/data/material/components/accordion/ControlledAccordions.tsx列表式定制样式示例docs/data/material/components/accordion/CustomizedAccordions.tsx把 ControlledAccordions.tsx 和上文的状态联动一节放在一起看基本就能覆盖 FAQ 页的常见需求了。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/8/29 22:04:02 · 阅读 1.2k Material-UI Accordion：从零到嵌套面板的完整上手指南
Material-UI Accordion从零到嵌套面板的完整上手指南【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui一句话先说清楚Accordion 是 Material-UI 里的可折叠卡片——点标题展开内容再点一次收起专门用来在不牺牲页面整洁的前提下塞进更多长内容。本文带你从最小示例一路写到受控联动和嵌套结构读完就能直接用在 FAQ、设置页这类场景里。组件拆解四个角色各管什么 Accordion 不是单个组件而是一套分工明确的组合可以把它理解成一张卡片被拆成了四个位置组件角色职责Accordion容器持有展开/收起状态负责整个面板的边框与分隔线AccordionSummary标题区实际是一个可点击的按钮承载标题文字和展开图标AccordionDetails内容区包裹展开后显示的内容自带内边距AccordionActions操作区可选放在内容下方挂取消、确认这类按钮渲染出来的 DOM 大致是外层一个MuiAccordion-root的 div里面先是一个h3包着 Summary 按钮再是一个roleregion的 div 包着 Details。所以标题默认是 h3后面避坑一节会提到怎么调整。快速跑通Accordion 最小示例 ⚡安装依赖npm install mui/material mui/icons-material三个组件加一个图标就是一个能跑的折叠面板import Accordion from mui/material/Accordion; import AccordionSummary from mui/material/AccordionSummary; import AccordionDetails from mui/material/AccordionDetails; import Typography from mui/material/Typography; import ExpandMoreIcon from mui/icons-material/ExpandMore; export default function ShippingPanel() { return ( Accordion AccordionSummary expandIcon{ExpandMoreIcon /} Typography运费政策/Typography /AccordionSummary AccordionDetails Typography订单满 199 元免运费常规快递 3 到 5 个工作日送达。/Typography /AccordionDetails /Accordion ); }逐段说下Accordion是第一子级必须是AccordionSummary它俩的嵌套关系不能乱expandIcon传入的图标展开时会自动翻转 180°不需要你写任何旋转逻辑AccordionDetails里放任意内容纯文本或一组表单都行。配置速查Accordion 常用属性 ️属性位置作用默认值defaultExpandedAccordion初始就展开属于非受控用法falseexpandedAccordion受控开关传入即接管状态-onChangeAccordion状态变化回调签名是(event, isExpanded)-disabledAccordion禁用点击与键盘聚焦背景变灰falsedisableGuttersAccordion展开时不撑出上下外边距falsesquareAccordion去掉圆角常和disableGutters搭配做列表样式falseexpandIconAccordionSummary更换展开指示图标-disabled的最小写法Accordion disabled AccordionSummary Typography维护中暂不可用/Typography /AccordionSummary AccordionDetails Typography该功能正在升级/Typography /AccordionDetails /Accordion面板会整体变成禁用配色点击和 Tab 聚焦都会失效适合占位但不让碰的场景。状态与联动如何做到一次只展开一个 不传expanded时每个面板自己管自己的状态可以随便多开。想要互斥的 FAQ 效果就把状态提到父组件import * as React from react; export default function FaqList() { const [expanded, setExpanded] React.useState(shipping); const handleChange (panel) (event, isExpanded) { // 展开时记录面板 id收起时清空天然实现互斥 setExpanded(isExpanded ? panel : false); }; return ( div Accordion expanded{expanded shipping} onChange{handleChange(shipping)} {/* Summary / Details 同最小示例 */} /Accordion Accordion expanded{expanded returns} onChange{handleChange(returns)} {/* Summary / Details 同最小示例 */} /Accordion /div ); }关键就是那行setExpanded(isExpanded ? panel : false)展开时存面板标识点击已展开的面板收起时置回false于是永远只有一个开着。想反过来支持多个同时开把状态改成数组展开时 push、收起时 filter 即可。组合玩法嵌套与多实例面板 Accordion 内部再放 Accordion 完全合法常用于分类 → 子项的层级内容Accordion defaultExpanded AccordionSummary Typography订单管理/Typography /AccordionSummary AccordionDetails Accordion AccordionSummary Typography查看物流/Typography /AccordionSummary AccordionDetails Typography包裹 SF1024567 已到深圳转运中心。/Typography /AccordionDetails /Accordion Accordion AccordionSummary Typography申请售后/Typography /AccordionSummary AccordionDetails Typography支持 7 天无理由退换运费到付。/Typography /AccordionDetails /Accordion /AccordionDetails /Accordion外层和内层各自独立控制展开状态互不干扰。另外当你把多个平级 Accordion 直接堆在同一个容器里时相邻面板之间会自动出现一条细分隔线首个面板的上边线除外这就是 Material 风格面板组的来源不需要额外加 border。体验打磨动效、性能与无障碍 动效。默认过渡用的是Collapse高度动画。想换成淡入淡出通过slots和slotProps替换过渡组件Accordion expanded{expanded} onChange{(event, isExpanded) setExpanded(isExpanded)} slots{{ transition: Fade }} slotProps{{ transition: { timeout: 400 } }} /性能。面板内容默认即使收起也挂在 DOM 里——这是为 SSR 和 SEO 考虑。如果 Details 里是很重的组件树、或者同页有几十个面板建议收起时直接卸载Accordion slotProps{{ transition: { unmountOnExit: true } }} /无障碍。WAI-ARIA 要求折叠标题与内容建立id/aria-controls关联。你只需要在AccordionSummary上写这一对Accordion会自动为内容区补上反向的aria-labelledbyAccordion AccordionSummary idfaq-1-header aria-controlsfaq-1-content Typography发票抬头怎么修改/Typography /AccordionSummary AccordionDetails Typography在设置页的账户信息里修改。/Typography /AccordionDetails /Accordion避坑新手高频问题 第一个子元素必须是 AccordionSummary。传 Fragment 或别的元素会直接报错Expected the first child of Accordion to be a valid element检查下 JSX 结构。expanded和defaultExpanded别混用。传了expanded组件就是受控模式defaultExpanded不再起作用还会触发受控/非受控切换的警告。忘记在 onChange 里同步状态。受控模式下组件不会自己改状态setExpanded没接上就会出现点了没反应。标题层级不对。Summary 外层默认渲染h3如果你的页面结构里它应该是 h4用slotProps{{ heading: { component: h4 } }}调整别手动包一层标签。图标不旋转这是好事情——expandIcon的翻转动画是组件内置的你手写 transform 反而会冲突。延伸资源 项目内可以直接打开这些文件对照源码看官方文档页docs/data/material/components/accordion/accordion.md组件源码packages/mui-material/src/Accordion受控多面板示例docs/data/material/components/accordion/ControlledAccordions.tsx列表式定制样式示例docs/data/material/components/accordion/CustomizedAccordions.tsx把 ControlledAccordions.tsx 和上文的状态联动一节放在一起看基本就能覆盖 FAQ 页的常见需求了。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考