当手风琴处于展开状态时，如何将样式应用于 MUI 手风琴中的 expandIcon？

编程问答 2022-05-17

问题描述

当 padding-top 展开时，我试图从 ExpandIcon 中的 Accordion 中删除 Accordion。我正在阅读 MUI 文档如何定位特定样式和状态，但我很难理解有关样式的文档。有人可以举例说明如何做这件简单的事情吗？

这是我的手风琴的样子：

enter image description here

如您所见，图标有 padding-top，我想将其删除，以便所有元素正确对齐。

enter image description here

解决方法

在 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 子元素。

accordionmaterial-uireactjsreactjsreactjsreactjs