Question

我有一个用ExpansionIcon指定的ExpansionPanelSummary，用于添加图标。单击后，它旋转，这都是ExpansionPanelSummary固有的。

但是，单击后，我希望“添加”图标变为“删除”图标。此行为似乎不是ExpansionPanelSummary固有的。我该如何调整？

<ExpansionPanel classes={{ root: "SubMenuPanel", expanded: "expanded" }}>
    <ExpansionPanelSummary expandIcon={<AddIcon/>} >
        ...

Answer 1

您可以尝试类似的方法。将expanded保存在州的某个地方，然后：

<ExpansionPanel classes={{ root: "SubMenuPanel", expanded: this.state.expanded }}>
    { this.state.expanded ? 
    (<ExpansionPanelSummary expandIcon={<AddIcon/>} >) :
    (<ExpansionPanelSummary expandIcon={<RemoveIcon/>} >) }
...

Answer 2

我将箭头更改为=>'+' 和向下箭头=>'-' 首先，您应该导入 import Add from '@material-ui/icons/Add'; import Remove from '@material-ui/icons/Remove';

然后在ExpansionPanelSummary中只是 expandIcon={expanded === item.key ? <Remove /> : <Add />}

Answer 3

import { withStyles } from "@material-ui/core/styles";

const ExpansionPanelSummary = withStyles({
  root: {
    backgroundColor: "#efefef",
    minHeight: 56,
    "&$expanded": {
      minHeight: 56
    }
  },
  content: {
    fontWeight: "bold",
    textTransform: "capitalize",
    "&$expanded": {
      margin: "12px 0"
    }
  },
  expanded: {},
  **expandIcon: {
    position: "absolute",
    left: "300px"
  }**
})(MuiExpansionPanelSummary);

更改ExpansionPanel上的图标

3 个答案: