Изменение значков на ExpansionPanelSummary Expansion

Question

У меня есть ExpansionPanelSummary, указанный с расширением Icon для значка добавления При щелчке он поворачивается, что является родным для ExpansionPanelSummary.

Однако при нажатии я хочу, чтобы значок «Добавить» превратился в значок «Удалить». Это поведение не кажется родным для ExpansionPanelSummary. Как бы я настроить?

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

Answer 1

я изменил стрелку до => '+' и стрелка вниз => '-' в первую очередь вы должны импортировать import Add from '@material-ui/icons/Add'; import Remove from '@material-ui/icons/Remove';

затем в ExpansionPanelSummary просто expandIcon={expanded === item.key ? <Remove /> : <Add />}

Answer 2

Вы можете попробовать что-то вроде этого. Сохраните expanded где-нибудь в состоянии, а затем:

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