chengzhanweicell 2022-08-23 09:44 采纳率: 50%
浏览 103
已结题

如何给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条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

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

      悬赏问题

      • ¥15 VS2019不能设置QT的verson了,设置了点确定又消失了,怎么解决呢?
      • ¥15 用java解决,要解释一下给我
      • ¥100 项目经理想学开发牛牛指点迷津有偿
      • ¥15 vscode 配置时出现问题
      • ¥15 pygame安装失败
      • ¥15 数据库原理怎么从文字描述中的句子推出(分析)函数依赖?
      • ¥15 想要使用有序logistic模型,因变量收集结果为以下,可以继续分析吗?
      • ¥15 C语言的问题 求尽快解答一下
      • ¥15 sql相关子查询的一道选择题
      • ¥15 关于图像检测的问题#