無法使用 Styled Utility 覆蓋 Mui Accordion

Question

我想使用 Mui 風格的實用程序覆蓋 Accordion CSS，但我無法將 Accordion css 應用到它上面。 有一個底層的 class，我無法在我的代碼中指出它。 這是 mui class：

<div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters css-1elwnq4-MuiPaper-root-MuiAccordion-root" style="user-select: auto;">

這是我的手風琴代碼

 const CustomizedAccordion = styled(Accordion)<AccordionProps>(({ theme }) => ({ root: { "&.MuiPaper-root": { color: 'darkslategray', backgroundColor: '#E4FAF4', borderRadius: '0.6rem', boxShadow: 'none' } }, paddingBottom: '1.6rem', boxShadow: 'none', }));

Answer 1

const CustomizedAccordion = styled(Accordion)(() => ({
  '& .MuiPaper-root': {
    color: 'darkslategray',
    backgroundColor: '#E4FAF4',
    borderRadius: '0.6rem',
    boxShadow: 'none'
  },
  paddingBottom: '1.6rem',
  boxShadow: 'none'
}));

Answer 2

我想從其代碼為.css-kj1tus-MuiPaper-root-MuiAccordion-root.Mui-expanded { margin: 16px 0; }的樣式修改擴展樣式 .css-kj1tus-MuiPaper-root-MuiAccordion-root.Mui-expanded { margin: 16px 0; } margin:0px 0px 0px 4px ;

但是，無法使其正常工作。

Answer 3

我有同樣的問題，解決方案在道具中

<Accordion disableGutters />

如果將其設置為 true，則邊距消失。 鏈接到手風琴 API