更改“选择”箭头图标

Question

我想用Ant Design提供的图标（https://ant.design/components/icon/）替换默认的下拉选择箭头，例如DownCircleOutlined。这是我的当前代码。目前还没有任何样式，因为我不知道该如何处理。

<Select>
    <Option value="1">a</Option>
    <Option value="2">b</Option>
    <Option value="3">c</Option>
</Select>

- user123

---

Ant Design 的 Select 组件实际上允许您通过将 Icon 组件传递给相应的属性来实现自定义图标。https://ant.design/components/select/#Select-props - Tomafa06

Answer 1

在 Select 组件上使用 suffixIcon 属性。

https://codesandbox.io/s/select-with-search-field-ant-design-demo-k217c?file=/index.js:0-679

例如：

import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
import './index.css'
import { Select } from 'antd'
import { DownCircleTwoTone } from '@ant-design/icons'
const { Option } = Select

ReactDOM.render(
  <Select
    suffixIcon={<DownCircleTwoTone />}
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
  </Select>,
  document.getElementById('container')
)

- Cesar Napoleon Mejia Leiva

---

suffixIcon 的 onclick 无法打开下拉菜单，有什么解决方法吗？ - Techtic Solutions Inc

@TechticSolutionsInc 将 className="ant-select-suffix" 添加到您的组件中。 - Willjay

如何修改它的颜色？ - Chervin Tanilon

给DownCircleTwoTone一个className。检查元素。您将看到图标的HTML结构应为： .CLASSNAMEGIVEN > svg > path，path，path（3个兄弟路径元素）您需要使用伪选择器（如nth-child()）针对每个兄弟进行定位，并更改path元素的fill属性以修改图标颜色。 - Cesar N Mejia Leiva