如何将MUI的AccordionSummary改为盒子样式而非占满整行？

核心思路 #

通过Accordion的expanded状态动态控制AccordionSummary的布局与样式，同时自定义"Status"元素的盒子外观，实现折叠时仅显示小盒子、展开时内容占满整行的效果。

具体实现代码 #

import { useState } from 'react';
import { Accordion, AccordionSummary, AccordionDetails, Box, ExpandMoreIcon } from '@mui/material';

export default function CustomAccordion() {
  const [expanded, setExpanded] = useState(false);

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

  return (
    <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
      <AccordionSummary
        sx={{
          padding: 0,
          justifyContent: expanded === 'panel1' ? 'space-between' : 'flex-start',
          '& .MuiAccordionSummary-content': {
            width: expanded === 'panel1' ? '100%' : 'auto',
            margin: 0,
            display: 'flex',
            alignItems: 'center'
          }
        }}
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1-content"
        id="panel1-header"
      >
        {/* Status小盒子 */}
        <Box 
          sx={{
            backgroundColor: '#f0f0f0',
            padding: '8px 16px',
            borderRadius: '4px',
            cursor: 'pointer',
            color: '#333'
          }}
        >
          Status
        </Box>
        {/* 展开时显示的额外内容 */}
        {expanded === 'panel1' && (
          <Box sx={{ flexGrow: 1, paddingLeft: 2 }}>
            展开时的内容，将占满整行剩余空间
          </Box>
        )}
      </AccordionSummary>
      <AccordionDetails>
        折叠面板的详细内容区域，展开后可见
      </AccordionDetails>
    </Accordion>
  );
}

关键样式说明 #

1. AccordionSummary基础样式：
   • 移除默认内边距padding: 0，避免多余间距
   • 根据expanded状态切换justifyContent，折叠时左对齐仅显示Status盒子，展开时两端对齐让内容占满整行
2. 重写默认内容容器：
   • 修改MuiAccordionSummary-content的宽度，折叠时自适应内容，展开时占满100%宽度
   • 移除默认margin，调整为flex布局并垂直居中
3. Status盒子样式：
   • 设置背景色、内边距、圆角，模拟小盒子外观
   • 添加cursor: pointer提示可点击

扩展优化（可选） #

如果需要复用该样式，可通过styled组件封装：

import { styled } from '@mui/material/styles';
import { AccordionSummary } from '@mui/material';

const StyledAccordionSummary = styled(AccordionSummary)(({ theme, expanded }) => ({
  padding: 0,
  justifyContent: expanded ? 'space-between' : 'flex-start',
  '& .MuiAccordionSummary-content': {
    width: expanded ? '100%' : 'auto',
    margin: 0,
    display: 'flex',
    alignItems: 'center',
    [theme.breakpoints.down('sm')]: {
      flexDirection: 'column',
      alignItems: 'flex-start'
    }
  }
}));

// 使用时传递expanded属性：
<StyledAccordionSummary expanded={expanded === 'panel1'} ...>

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