我想用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>
在suffixIcon
组件上使用Select
道具。
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')
)