我试图让
Accordion
MUI 组件在展开模式下不移动也不将顶部和底部边距应用于某些元素。
示例如下,但它不起作用,我的组件仍然太“跳跃”(展开时它的宽度增加,就像添加了一些不可见的边距)
...
expanded: {
margin: '0px',
},
test: {
'&$expanded': {
margin: '0px',
},
},
...
<Accordion
classes={{
root: classes.test,
expanded: classes.expanded,
}}
expanded={expanded}
>
<AccordionSummary
onClick={() => setExpanded(!expanded)}
classes={{
expanded: classes.expanded,
}}
>
The Summary
</AccordionSummary>
<AccordionDetails>
<p>the details</p>
</AccordionDetails>
</Accordion>
在 MUI v5 和 v6 中,只需将
disableGutters
设置为 true
即可。这可以防止展开手风琴时所有向上/向下重新定位。更多信息在这里:https://mui.com/material-ui/api/accordion/#props.
像这样:
<Accordion disableGutters>
{/* ... */}
</Accordion>
您可以通过将
Accordion
边距设置为 auto
来实现此目的,这应该与将其设置为 0
相同。确保该样式应用于屏幕上的每个 Accordion
。请参阅此示例此处。
扩展时
Accordion
的移动只是正边距加上扩展时的过渡效果的副作用。删除边距可能会解决您的问题。
import { withStyles } from "@material-ui/core/styles";
import MuiAccordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";
const Accordion = withStyles({
root: {
"&$expanded": {
margin: "auto"
}
},
expanded: {}
})(MuiAccordion);
如果人们仍然在努力解决这个问题,请编写一个 div 或 Box 并将其包裹在每个手风琴周围。 示例:
export const AccordionStyled = styled(Accordion)(
sx({
border: 'none',
boxShadow: 'none',
})
);
export const BoxStyled = styled(Box)(
sx({
'& AccordionStyled': {
margin: '0px !important',
},
})
);
<BoxStyled>
<AccordionStyled>
[your code here]
</AccordionStyled>
<BoxStyled>
这会覆盖边距,还有助于控制/删除默认应用的任何其他样式。这也适用于人们发现难以删除或覆盖的任何 MUI 组件。