解决方案，Ant Design

antd3中Select组件自定义suffixIcon下拉收起不旋转解决方案

今天有个需求需要修改Select组件的arrow图标，经过查询文档得知可通过suffixIcon修改。

注意showArrow的值为true

如下代码，当我修改完成后，点击Select 图标却没有旋转。

1
<Select suffixIcon={<img src="xxxx.png" />} />

查找antd的Issues也没有得到有效的解决方法。

干脆直接对比使用suffixIcon和默认情况下的不同。

找到下面的样式

1
2
3
4
5
.ant-select-open .ant-select-arrow-icon svg {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

自定义suffixIcon后并没有应用以上样式。其中 ant-select-arrow-icon 为一个i标签，内部是svg标签，而自定义的icon外部并没有包裹此标签。

修改一下suffixIcon的内容并将img换为svg。

1
2
3
4
5
6
7
<Select
  suffixIcon={
    <i className='anticon anticon-down ant-select-arrow-icon'>
      <svg>svg内容</svg>
    </i>
  }
/>

这样就可以正常实现功能了