如何解决当手风琴处于展开状态时,如何将样式应用于 MUI 手风琴中的 expandIcon?
当 padding-top
展开时,我试图从 ExpandIcon
中的 Accordion
中删除 Accordion
。我正在阅读 MUI 文档如何定位特定样式和状态,但我很难理解有关样式的文档。有人可以举例说明如何做这件简单的事情吗?
这是我的手风琴的样子:
如您所见,图标有 padding-top
,我想将其删除,以便所有元素正确对齐。
解决方法
在 Accordion
组件中展开图标包裹在 IconButton
组件中,MUI 给了 props IconButtonProps
来传递 Icon 按钮相关的 props。因此,首先您必须创建样式,将该样式传递到 IconButton
组件中。
首先使用makeStyle
函数创建样式?
const useStyles = makeStyles((theme) => ({
iconBtn: {
paddingTop: 0
}
}));
然后把这个类传给AccordionSummary
组件属性IconButtonProps
?
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3bh-content"
id="panel3bh-header"
IconButtonProps={{ className: classes.iconBtn }}
>
代码沙盒链接:https://codesandbox.io/s/flamboyant-wescoff-329wj?file=/src/App.js
? hacky 方式 ->
如果您想将 AccordionSummary
组件的 All 子元素居中,则添加 align-items: center
因为 AccordionSummary
由 display: flex
组成。 警告 - 这种骇人听闻的方式可能会影响所有 AccordionSummary
子元素。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。