reactjs - 展开手风琴摘要时如何更改图标?
问题描述
我想根据手风琴是否展开来更改图标。
我在 CSS 具有 .Mui-expanded 的材料 ui 页面上看到,它可以看到扩展 = {true} 还是 false,但是当扩展是 true 或 false 时,我如何使用它来设置不同的图标。
所以我想在 expand 为 true 时设置 IconA ,如果 expand 为 false 则设置 IconB 。
expandIcon={<IconA/>}
解决方案
您可以使用expandIcon
可用于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/#controlled-accordion
推荐阅读
- python - 如何使用python在列表中的单个字符串中获取值而不用逗号分隔csv文件?
- python - 为什么使用 python 调试器时没有定义异常对象?
- python - 如何处理解决 Anaconda 中的环境安装问题?
- java - 线程“主”java.sql.SQLException 中的异常:找不到适合 jdbc:ucanaccess://C:/Users/gfas1/Desktop/st.accdb 的驱动程序
- openldap - LDAP 与 Open Distro for Elasticsearch 的集成
- c - 在枚举的最后一个_BIG_ENUM=0xFFFFFFFF是什么意思?
- php - 遍历数组:每个值的新变量
- linux - 有什么办法可以列出 Linux 内核支持的 inotify 事件?
- vue.js - 来自 REST 服务的 Vue 网格数据
- c# - c# 在类构造函数中访问我的数组