antd的select选择框选项如何水平横向排列？选项如何是图片？
最近遇到需求select选择框选项和值为图片，且选项必须水平排列，项目用的是antd，索性就从修改样式入手改改antd
有啥问题欢迎留言一起讨论

先看效果

xuehuayu.cn

分析

查看antd的文档，使用optionLabelProp属性

实现

Select标签添加optionLabelProp属性，指定显示内容为label属性

1
2
3
4
5
6
7
8
9
<Select
  optionLabelProp="label"
>
  <Select.Option value="auto" label={<CustomIcon type='auto'/>}> // CustomIcon 为自定义图片组件
    <div style={ { position: 'relative', height: 45 } }>
      <CustomIcon type="auto"/>
    </div>
  </Select.Option>
</Select>

相关链接