Изменение значка стрелки "Выбрать" - PullRequest
Новая
       74

Изменение значка стрелки "Выбрать"

1 голос
/ 28 мая 2020

Я хочу заменить стрелку выбора раскрывающегося списка по умолчанию на и значок, предоставленные 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>

1 Ответ

1 голос
/ 28 мая 2020

Используйте свойство 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')
)
...