扩展时删除 MUI Accordion 间隙

Question

我试图让 Accordion MUI 组件在展开模式下不移动也不将顶部和底部边距应用于摘要元素。我将此代码添加到摘要元素中，但这不起作用。你能给我什么？值得一提的是，它适用于第一个手风琴，但不适用于其他手风琴!!!!!!!!!!

sx={{
   "&.Mui-expanded": {
   minHeight: 0,
   margin: '12px 0',
   },
   "& .MuiAccordionSummary-content.Mui-expanded": {
   margin: 0,
   }
}}

Answer 1

我使用了MUI定制的手风琴，并将其设置更改为： 我用了我的图标。它有白色背景，没有边框和额外的填充或边距:))))

export const Accordion = styled((props: AccordionProps) => (
    <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
    position: 'unset',
    border: 'none',
    boxShadow: 'none',
    maxWidth: 720,
    margin: '12 0',
    '&:before': {
        display: 'none',
        border: 'none'
    }
}));

export const AccordionSummary = styled((props: AccordionSummaryProps) => (
    <MuiAccordionSummary expandIcon={<ExpandMoreIcon />} {...props} />
))(({ theme }) => ({
    backgroundColor: 'white',
    padding: 0,
    flexDirection: 'row',
    '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
        transform: 'rotate(180deg)'
    }
}));

export const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
    padding: 0,
    border: 'none'
}));

export const FAQText = styled(Typography)({
    maxWidth: 628
});

Answer 2

您将此道具设置为

Accordion

还是

AccordionSummary

？我已经在 StackBlitz 上测试了您的代码，将其设置在

Accordion

元素上，并且它工作正常。