Material UI中如何给AccordionDetails设置maxHeight实现滚动

直接给承载内容的AccordionDetails组件配置高度限制和滚动规则即可，不要修改外层Accordion或头部AccordionSummary的高度属性，避免折叠逻辑、点击区域错位。

方案1：单组件快速配置（适合单个场景使用） #

直接在渲染列表的AccordionDetails上通过sx属性写入自定义样式，核心是设置固定maxHeight和纵向滚动：

<Accordion>
  <AccordionSummary expandIcon={<ExpandMoreIcon />}>
    <Typography>电影列表</Typography>
  </AccordionSummary>
  {/* 核心样式配置区域 */}
  <AccordionDetails
    sx={{
      maxHeight: 420, // 按需调整你需要的展开区最大高度
      overflowY: "auto", // 内容超出高度时自动显示纵向滚动条
      // 可选：优化滚动条显示样式
      "&::-webkit-scrollbar": {
        width: 6,
      },
      "&::-webkit-scrollbar-thumb": {
        backgroundColor: "#ccc",
        borderRadius: 3,
      },
    }}
  >
    {/* 这里放你的上百条电影条目渲染逻辑 */}
    {movieList.map((item) => (
      <Box key={item.id} sx={{ py: 1.2, borderBottom: "1px solid #f0f0f0" }}>
        {item.name}
      </Box>
    ))}
  </AccordionDetails>
</Accordion>

这种写法不会影响Accordion自带的展开/折叠动画，MUI的过渡逻辑会自动识别内容区高度，滚动条只在内容超出设定maxHeight时出现，不会一次性把所有条目全撑开。

方案2：封装复用组件（适合多场景统一规则） #

如果项目里有多个Accordion都需要做长列表滚动限制，可以用MUI提供的styled工具封装通用组件，避免重复写样式：

import { styled } from "@mui/material/styles";
import AccordionDetails from "@mui/material/AccordionDetails";

// 封装带滚动高度限制的内容区组件
const ScrollAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
  maxHeight: 420,
  overflowY: "auto",
  "&::-webkit-scrollbar": {
    width: 6,
  },
  "&::-webkit-scrollbar-thumb": {
    backgroundColor: theme.palette.grey[300],
    borderRadius: 3,
  },
}));

后续使用时直接替换原生AccordionDetails即可，所有配置会自动生效。

注意：不要在外层Box、Accordion根组件、AccordionSummary头部组件上设置maxHeight，这类设置会导致折叠态布局错乱、点击展开区域识别异常，高度限制必须加在专门承载内容的AccordionDetails节点上。

内容的提问来源于stack exchange，提问作者user2824374