如何解决展开时如何消除手风琴间隙?
我试图让 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>
解决方法
您可以通过将 Accordion
边距设置为 auto
来实现,这应该与将其设置为 0
相同。确保该样式应用于屏幕上的每个 Accordion
。请参阅此示例 here。
扩展时移动 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);
现场演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。