前端神棍 2022-08-23 09:44 采纳率: 50%
浏览 563
已结题

如何给ant的select组件每个下拉框添加一个图标

想在ant的select组件的每个下拉框中添加一个图标
    const children = [];
    reviewers.forEach((element, index) => {
      children.push(
        <Option
          key={index}
          value={element.checkUserId}
          className={styles.icon1}
        >
          {element.name}
        </Option>
      );
    });
           <Select
              showSearch
              defaultOpen={true}
              mode="multiple"
              onChange={this.onChange}
              allowClear
              style={{ width: 450 }}
              placeholder="请输入关键字搜索"
            >
              {children}
            </Select>

实现前:

img

我的解答思路和尝试过的方法 :我尝试过通过伪元素的方式
:global {
  .ant-select-item-option-content::before {
    content: url(../../assets/images/btns/icon1.svg);
    margin-right: 16px;
  }
}

但是

:global

只有加到全局才能生效,我在select外面包个div,然后用div包括:global也不行,因为不想让样式产生污染,所以不知道还有没有什么办法,希望各位给予意见。

我想要达到的结果:

img

  • 写回答

4条回答 默认 最新

  • 前端神棍 2022-08-23 11:33
    关注

    已经解决,解决方案:直接给option添加一个className,然后样式里面,直接给这个className添加伪元素,通过添加伪元素显示出来这个图标,这样既解决了图标的显示问题,又不会对原来的option里面的内容产生影响,具体代码如下:
    js:

    <Option
              key={index}
              value={element.checkUserId}
              className={styles.icon1}
            >
              {element.name}
            </Option>
    
    
    

    less:

    .icon1::before{
        content: url(../../assets/images/btns/icon1.svg);
        margin-right: 16px;
      }
    
    

    需要注意的是这个className也需要写在less文件的最外层,所以请注意让这个className不要重名,防止污染。
    非常感谢大家给的意见,谢谢。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 8月31日
  • 已采纳回答 8月23日
  • 创建了问题 8月23日

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request,如何使用ssr节点,通过代理requests网页。本人在泰国,需要用大陆ip才能玩网页游戏,合法合规。
  • ¥100 为什么这个恒流源电路不能恒流?
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题