展开手风琴摘要时如何更改图标？答案

【问题标题】：How to change icon when accordion summary is expanded?展开手风琴摘要时如何更改图标？
【发布时间】：2020-12-20 18:32:36
【问题描述】：

我想根据手风琴是否展开来更改图标。

我在 CSS 具有 .Mui-expanded 的材料 ui 页面上看到，它可以查看 expand={true} 还是 false，但是当扩展为 true 或 false 时，我如何使用它来设置不同的图标。
因此，如果 expand 为 true，我想设置 IconA，如果 expand 为 false，我想设置 IconB。

expandIcon={<IconA/>}

【问题讨论】：

标签： reactjs typescript material-ui accordion

【解决方案1】：

您可以使用可用于AccordionSummary 组件的expandIcon 属性。设置条件如下：expandIcon={expanded === 'panel1'?<ExpandMoreIcon />:<Minimize/>}

<Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
    <AccordionSummary
      expandIcon={expanded === 'panel1'?<ExpandMoreIcon />:<Minimize/>}
      aria-controls="panel1bh-content"
      id="panel1bh-header"
    >
      <Typography className={classes.heading}>General settings</Typography>
      <Typography className={classes.secondaryHeading}>I am an accordion</Typography>
    </AccordionSummary>
    <AccordionDetails>
      <Typography>
        Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget
        maximus est, id dignissim quam.
      </Typography>
    </AccordionDetails>
  </Accordion>

此示例代码取自文档：https://material-ui.com/components/accordion/#controlled-accordion

【讨论】：

是从手风琴扩展的组件还是我创造的价值？
expanded 是使用useState 创建的状态变量。参考：material-ui.com/components/accordion/#controlled-accordion
不使用字符串，我可以简单地使用布尔值 true 或 false 吗？
另外，如何将图标移到文本前面的左侧？
没有。 boolean 不起作用，因为您无法确定要打开哪个手风琴。要将图标移到前面，请删除 expandIcon 道具并编写您自己的标记以显示图标

【解决方案2】：

你可以使用条件渲染

     <Accordion
      key={index + 1}
      className={style.accordianMargin}
      expanded={expanded === index + 1}
      onChange={handleChange(index + 1)}
    >
      <AccordionSummary
        expandIcon={
          expanded && opened === index + 1 ? <RemoveIcon /> : 
                                                <AddIcon />
        }
      >

【讨论】：