【Material-UI】Accordion中的Customization详解

Material-UI 是一个广受欢迎的 React UI 库，提供了丰富的组件来帮助开发者快速构建现代化的用户界面。在本文中，我们将详细介绍 Material-UI 中 Accordion 组件的自定义功能（Customization），并展示如何在开发中灵活应用它来实现不同的交互效果。

一、Accordion 组件概述

1. 组件介绍

Accordion 是一种常见的折叠面板组件，允许用户通过点击标题展开或折叠面板内容。在信息密集的页面中，它能有效减少屏幕占用，提升用户体验。Material-UI 提供的 Accordion 组件不仅易于使用，还支持高度的自定义，满足不同的设计需求。

2. 主要组成部分

Accordion 组件由以下几个部分组成：

• AccordionSummary：面板的标题部分，用户点击此部分可以展开或收起面板内容。
• AccordionDetails：面板的内容部分，展示当面板展开时的具体内容。
• AccordionActions（可选）：用于放置按钮等操作元素。

二、Customization 的核心要点

1. 只允许一个面板展开

在某些场景下，我们可能只希望同时展开一个面板。通过配合 React 的 useState 钩子，可以轻松实现这一需求。以下代码展示了如何自定义 Accordion，确保在任意时刻只有一个面板处于展开状态：

import * as React from 'react';
import { styled } from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
import MuiAccordion from '@mui/material/Accordion';
import MuiAccordionSummary from '@mui/material/AccordionSummary';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';

const Accordion = styled((props) => (
  <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
  border: `1px solid ${theme.palette.divider}`,
  '&:not(:last-child)': {
    borderBottom: 0,
  },
  '&::before': {
    display: 'none',
  },
}));

const AccordionSummary = styled((props) => (
  <MuiAccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
    {...props}
  />
))(({ theme }) => ({
  backgroundColor: 'rgba(0, 0, 0, .03)',
  flexDirection: 'row-reverse',
  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
    transform: 'rotate(90deg)',
  },
  '& .MuiAccordionSummary-content': {
    marginLeft: theme.spacing(1),
  },
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  padding: theme.spacing(2),
  borderTop: '1px solid rgba(0, 0, 0, .125)',
}));

export default function CustomizedAccordions() {
  const [expanded, setExpanded] = React.useState('panel1');

  const handleChange = (panel) => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
  };

  return (
    <div>
      <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
        <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
          <Typography>Collapsible Group Item #1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            这里是面板1的内容。你可以将这里替换为任何文本或组件。
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
        <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
          <Typography>Collapsible Group Item #2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            这里是面板2的内容。你可以根据需求进行自定义。
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
        <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
          <Typography>Collapsible Group Item #3</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            这里是面板3的内容，继续自定义你的用户界面。
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

在上述代码中，通过 useState 控制 Accordion 的展开状态，确保只有一个面板是展开的。每当用户点击某个面板时，其余面板都会收起。

2. 修改 Accordion 标题的层级

默认情况下，Accordion 组件的标题使用 h3 元素。但在某些场景中，开发者可能需要修改标题的层级以保持页面的语义化结构。我们可以通过 slotProps.heading.component 属性来自定义标题层级。例如，使用 h4 代替默认的 h3：

<Accordion slotProps={{ heading: { component: 'h4' } }}>
  <AccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon />}
    aria-controls="panel-content"
    id="panel-header"
  >
    <Typography>Accordion Title</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>
      这里是Accordion的内容，你可以自由添加文本或其他组件。
    </Typography>
  </AccordionDetails>
</Accordion>

3. 提高性能的优化方案

在默认情况下，即使 Accordion 的内容未展开，其内容也是已经挂载在 DOM 中的。对于内容较多或者嵌套结构较深的面板，这种默认行为可能会影响性能。为了解决这个问题，可以使用 unmountOnExit 属性来确保面板收起时，内容被卸载，从而提升性能：

<Accordion slotProps={{ transition: { unmountOnExit: true } }}>
  <AccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon />}
    aria-controls="panel-content"
    id="panel-header"
  >
    <Typography>优化性能的Accordion</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>
      当这个面板收起时，内容会被卸载，减少DOM的负担。
    </Typography>
  </AccordionDetails>
</Accordion>

4. 视觉自定义

通过 styled 方法，可以轻松地对 Accordion 进行视觉上的自定义。例如，自定义面板的边框颜色和背景色：

const CustomAccordion = styled(MuiAccordion)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.primary.contrastText,
  border: `2px solid ${theme.palette.secondary.main}`,
}));

// 在组件中使用
<CustomAccordion>
  <AccordionSummary expandIcon={<ArrowForwardIosSharpIcon />}>
    <Typography>自定义样式的Accordion</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>
      这个面板应用了自定义的样式。
    </Typography>
  </AccordionDetails>
</CustomAccordion>

此示例展示了如何通过 styled 方法，将 Accordion 的颜色和边框定制为应用主题中的配色方案，确保组件的外观与整体设计风格一致。

三、Accessibility（无障碍访问）优化

Accordion 组件也支持无障碍访问设计。根据 WAI-ARIA 的建议，我们需要为 AccordionSummary 组件设置 id 和 aria-controls 属性，并由 Accordion 组件根据内容自动生成 aria-labelledby 属性，确保无障碍工具能够正确识别面板的内容。

<Accordion>
  <AccordionSummary id="panel1-header" aria-controls="panel1-content">
    <Typography>无障碍访问的Accordion</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>
      这是无障碍访问优化后的面板内容。
    </Typography>
  </AccordionDetails>
</Accordion>

四、总结

Material-UI 提供的 Accordion 组件不仅功能强大，还支持高度的自定义。通过 React 的 useState 钩子，开发者可以轻松控制面板的展开状态；通过 styled 方法，可以实现视觉上的定制；同时，通过优化无障碍访问和性能，可以确保用户界面更加友好和高效。

推荐：

• JavaScript
• react
• vue

---