css - 如何自定义 material-ui Accordion 组件的行为/样式？

Question

我有一个 div 容器(灰色)，其中包含一个只有一个 AccordionSummary 组件的 Accordion 组件。下面还有另一个 div(蓝色)。一切看起来都不错(图片＃1)。 当我展开 Accordion 时:

• 它显示 AccordionDetails 组件 - 好
• 它会自动调整灰色容器 div 的大小 - 很好
• 但还不够，所以蓝色 div 超出了容器 - 不好(图片 #2)

假设这是一个标准的 Accordion 组件行为。但是你们有没有人遇到过这样的问题，你们是如何处理的？

Answer 1

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

const CustomAccordion = styled(Accordion)(({ theme }) => {
  return {
    boxShadow: 'none', // this styles directly apply to accordion
    border: `1px solid gray`,
    '.MuiAccordionDetails-root': {},
    '.MuiAccordionSummary-root': {}, // this apply to Summary
  };
});

现在你可以用 Accordion 代替