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

Question

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

我在Material ui页面上看到CSS具有.Mui-expanded，它可以查看expanded={true}或false，但是当expanded为true或false时，如何使用它来设置不同的图标。

所以我想如果expand为true则设置IconA，如果expand为false则设置IconB。

expandIcon={<IconA/>}

Answer 1

您可以使用组件expandIcon可用的 prop AccordionSummary。设置条件如下：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/#control-accordion

Answer 2

上面提到的解决方案/sf/answers/4458391941/绝对正确，但缺点是useState当手风琴折叠/展开时必须使用钩子来显示不同的图标。然而，这使得在主题中全局指定自定义 ExpandIcon 变得困难（不可能？）。因此，我认为 Mui 应该将扩展状态传递给expandIconprop。有一个针对此https://github.com/mui/material-ui/issues/18326的功能请求，但尚未实现。作为上述解决方案的解决方法和替代方案，其优点是可以在全局主题中使用，可以通过这种方式提供自定义图标：

  const CustomExpandIcon = () => {
    return (
      <Box
        sx={{
          '.Mui-expanded & > .collapsIconWrapper': {
            display: 'none',
          },
          '.expandIconWrapper': {
            display: 'none',
          },
          '.Mui-expanded & > .expandIconWrapper': {
            display: 'block',
          },
        }}
      >
        <div className="expandIconWrapper">
          <MinusIcon />
        </div>
        <div className="collapsIconWrapper">
          <PlusIcon />
        </div>
      </Box>
    )
  }

请参阅：https://codesandbox.io/s/basicaccordion-material-demo-forked-2916o