如何增加 Antd Collapse 图标大小并在折叠展开时更改它

Question

我需要做两件事：

需要增加默认图标箭头大小
展开面板时需要将图标更改为不同的图标。

我设法做到了这一点：

  <Collapse
  expandIconPosition='right'
  className='collapse-container'

  // this works fine
  expandIcon={({isActive}) => isActive
  ? <img src={closeCollapseIcon} />
  : <img src={openCollapseIcon} />}
  >
    <Panel header='Question...' key='3'>
      <p className='help-panel-text'>Some text</p>
    </Panel>
  </Collapse>

我的问题是：有没有办法以更优雅的方式做同样的事情？我的解决方案似乎太简单了。

Answer 1

不需要渲染两个img标签，一个标签就可以实现同样的效果。更合适的方式是使用ant design

提供的Icon组件

    expandIcon={({ isActive }) => (
      <Icon
        component={isActive ? closeCollapseIcon : openCollapseIcon}
        width="2em"
        height="2em"
      />
    )}

如何增加 Antd Collapse 图标大小并在折叠展开时更改它

How to increase Antd Collapse icon size and change it if collapse is expanded

reactjs

antd