如何用React+MaterialUI实现关闭时仍显示黑线的Accordion？

我基于React和Material UI实现Accordion组件时遇到一个问题——参考示例里手风琴关闭时底部仍保留黑线，但我写的代码里黑线会随手风琴关闭而隐藏。以下是我尝试的代码：

<div>
      <Accordion elevation={0} disableGutters={true} >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >

          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        
        <div style={{ border: '1px solid black' }}></div>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>

解决方案 #

方法1：将黑线元素移至Accordion外部 #

你当前把黑线放在Accordion内部，手风琴关闭时会自动隐藏除AccordionSummary之外的所有内部元素，因此把黑线移到Accordion外面就能保证始终显示：

<div>
  <Accordion elevation={0} disableGutters={true} >
    <AccordionSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1a-content"
      id="panel1a-header"
    >
      <Typography>Accordion 1</Typography>
    </AccordionSummary>
    <AccordionDetails>
      <Typography>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        malesuada lacus ex, sit amet blandit leo lobortis eget.
      </Typography>
    </AccordionDetails>
  </Accordion>
  {/* 黑线移至Accordion外部，确保始终可见 */}
  <div style={{ borderTop: '1px solid black', width: '100%' }}></div>
</div>

方法2：通过自定义样式给Accordion添加固定底部边框 #

使用Material UI的styled工具封装Accordion，强制添加底部边框并覆盖默认的折叠样式：

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

// 自定义带固定底部边框的Accordion组件
const StyledAccordion = styled(Accordion)(({ theme }) => ({
  borderBottom: '1px solid black',
  // 移除Material UI默认的Accordion分隔线
  '&.MuiAccordion-root:before': {
    display: 'none',
  },
}));

// 使用自定义组件
<div>
  <StyledAccordion elevation={0} disableGutters={true} >
    <AccordionSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1a-content"
      id="panel1a-header"
    >
      <Typography>Accordion 1</Typography>
    </AccordionSummary>
    <AccordionDetails>
      <Typography>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        malesuada lacus ex, sit amet blandit leo lobortis eget.
      </Typography>
    </AccordionDetails>
  </StyledAccordion>
</div>

方法3：给AccordionSummary添加底部边框 #

如果只需要在标题栏下方显示黑线，可以直接给AccordionSummary添加底部边框，这样无论手风琴是否展开都能保持显示：

<div>
  <Accordion elevation={0} disableGutters={true} >
    <AccordionSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1a-content"
      id="panel1a-header"
      style={{ borderBottom: '1px solid black' }}
    >
      <Typography>Accordion 1</Typography>
    </AccordionSummary>
    <AccordionDetails>
      <Typography>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        malesuada lacus ex, sit amet blandit leo lobortis eget.
      </Typography>
    </AccordionDetails>
  </Accordion>
</div>

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