三步搭好Material-UI折叠面板：从零到FAQ页与设置面板
【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Google's Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui
Material-UI 的折叠面板（Accordion）组件，把相关内容收进一组可展开、可收起的面板里。它特别适合 FAQ 页和设置面板：用户只点自己关心的，页面自然就清爽了。
先看看两种需要折叠面板的场景 🧩
场景一：电商 FAQ 页。运费、支付、开票二十多个问答全部铺开，页面就是一堵文字墙。拆成折叠面板后，默认全部收起，用户点哪个看哪个，信息密度立刻可控。
场景二：应用设置面板。把设置项按"基础""通知""隐私"分成三个面板，各自带操作按钮，层级清晰，滚动量也省了。
这就是 React 里经典的"手风琴"交互：右侧箭头旋转、内容滑入滑出，动画全部内置，你不用写一行动画代码。
三步写出最小可用折叠面板 ⚡
第一步，导入三个核心组件和展开图标；第二步，按 Accordion、Summary、Details 的顺序嵌套；第三步，保存打开页面：
import Accordion from '@mui/material/Accordion'; import AccordionSummary from '@mui/material/AccordionSummary'; import AccordionDetails from '@mui/material/AccordionDetails'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />}> 配送政策 </AccordionSummary> <AccordionDetails> 全场满 99 元包邮，7 天内可无理由取消订单。 </AccordionDetails> </Accordion>Accordion 是最外层容器，Summary 是可点击的标题，Details 是内容区，expandIcon 就是那枚会旋转的箭头。这个结构是固定的，复制即用，就得到一个功能完整的折叠面板。
常用属性配置速查 🛠️
日常最常用的六个属性整理成下表，其余属性按需查类型定义：
| 属性 | 作用 | 一行示例 |
|---|---|---|
defaultExpanded | 默认展开，即"折叠面板默认展开" | <Accordion defaultExpanded> |
disabled | 禁用展开折叠和焦点 | <Accordion disabled> |
expandIcon | 换展开指示图标，挂在 Summary 上 | expandIcon={<ArrowDownwardIcon />} |
disableGutters | 去掉上下留白，面板更紧凑 | <Accordion disableGutters> |
square | 去掉首尾默认圆角 | <Accordion square> |
slotProps.transition | 调整展开过渡的参数 | slotProps={{ transition: { unmountOnExit: true } }} |
expanded和onChange是一对受控属性，单独留到下一节讲。
进阶一点：受控状态与卸载内容 🚀
一次只展开一个面板。用useState记录"当前谁展开"，新面板打开时自动把旧的收掉：
const [expanded, setExpanded] = React.useState('p1'); const toggle = (key) => (e, isExpanded) => setExpanded(isExpanded ? key : false); return ( <div> <Accordion expanded={expanded === 'p1'} onChange={toggle('p1')}> <AccordionSummary expandIcon={<ExpandMoreIcon />}>基础设置</AccordionSummary> <AccordionDetails>基础设置内容</AccordionDetails> </Accordion> <Accordion expanded={expanded === 'p2'} onChange={toggle('p2')}> <AccordionSummary expandIcon={<ExpandMoreIcon />}>高级设置</AccordionSummary> <AccordionDetails>高级设置内容</AccordionDetails> </Accordion> </div> );每个面板的expanded都从同一份状态推导，多个面板天然互斥。这是 React 手风琴组件用法里最实用的模式。
收起时卸载内容。默认情况下，收起的面板内容仍然挂载在 DOM 里，这是为 SSR 和 SEO 做的妥协。如果里面塞了重组件树，改成展开时才挂载：
<Accordion slotProps={{ transition: { unmountOnExit: true } }} />收起后内容直接从 DOM 移除，展开时再挂载，节点数和内存占用都更省。
五个避坑清单
- Accordion 的第一个孩子必须是
AccordionSummary，不接受 Fragment，Details 放前面会直接报错。 - 一旦传了
expanded，组件就变成受控模式；不写onChange回写状态，面板会点不动。 - 标题默认是
h3标签。页面标题层级因此错乱时，用slotProps.heading.component换成h4等。 - 想在内容下方放操作按钮，用可选的
AccordionActions，别忘了导入它。 - 嵌套折叠面板时，把内层 Accordion 放进外层 Details 即可，组件不限制嵌套层级。
收尾
折叠面板把状态、动画和无障碍都替你做好了，接上就能用。现在，把它搬进你自己的项目，搭一个 FAQ 页试试。
- 折叠面板官方文档
- 组件源码目录
- 受控折叠面板示例
【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Google's Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
