Как изменить стиль компонента «Выбор» Ant-Design?

<Select> отображает весь набор <div>, вам нужно взглянуть на получившееся дерево элементов HTML, чтобы понять, что вы делаете. Вы не можете сделать это через атрибут style, вам нужно сделать это в CSS.

Правильное место для добавления цвета фона -

.ant-select-selection {
  background-color: green;
}

Это сделает все ваши выборы зелеными. Дайте им отдельные className, если вы хотите разные цвета для разных выделений.

Для моей формы с элементом Select a есть код в render:

const stateTasksOptions =
    this.tasksStore.filters.init.state.map(item =>
        <Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
            <span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
        </Select.Option>
    )

return (
    ....
    <Select
        mode="multiple"
        value={this.tasksStore.filters.selected.state.map(d => d)}
        onChange={this.handleTasksStatus}
        optionLabelProp="title"
    >
        {stateTasksOptions}
    </Select>
    ....
)

И немного css для раскрашивания.

Результат:

Попробуйте dropdownStyle вместо style.

<Select
 dropdownStyle={{ backgroundColor: 'green' }}>
   // Options...
</Select>

dropdownStyle - один из избранных свойств.

ссылка: antd select

со всеми приведенными выше ответами вы не можете изменить стили тегов условно, но с подходом ниже вы можете.

Вы можете взломать и изменить стили тегов в раскрывающемся списке по своему усмотрению. Вы можете использовать dropdownRender of select, который принимает 2 аргумента

• menuNode
• реквизит

используйте свойство props children, чтобы добраться до каждого тега и изменить стили, а вы можете условно изменить стили по своему усмотрению.

для справки ниже приведен пример ссылки для песочницы кода

Выберите стили тегов Sanbox

Возможно, это неэффективный способ сделать это, но вы можете использовать его сейчас для удовлетворения своих бизнес-требований.

Спасибо

Они реализовали эту функцию с v4 дизайна муравьев:
https://github.com/ant-design/ant-design/pull/21064

Но будьте осторожны, прежде чем слепо переходить с v3 на v4 - многое изменилось:
https://github.com/ant-design/ant-design/issues/20661

Кто-то заявил, что селектор

.ant-select-selection {...

Однако это должен быть селектор:

.ant-select-selector {
  background-color: green;
}

Из их официальных документов https://pro.ant.design/docs/style

Переопределение стиля компонента Из-за особых потребностей проекта мы часто сталкиваемся с необходимостью охватить стиль компонента, вот простой пример.

Antd Select В состоянии множественного выбора по умолчанию будут отображаться все выбранные элементы, здесь мы добавляем предельную высоту для полосы прокрутки отображения, когда содержимое превышает эту высоту.

// TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

ReactDOM.render(
  <Select
    mode="multiple"
    style={{ width: 300 }}
    placeholder="Please select"
    className={styles.customSelect}
  >
        {children}
      
  </Select>,
  mountNode,
);

/* TestPage.less */
.customSelect {
  :global {
    .ant-select-selection {
      max-height: 51px;
      overflow: auto;
    }
  }
}

Следует отметить два момента:

Имя импортированного класса компонента antd не переводится модулями CSS, поэтому переопределенное имя класса .ant-select-selection должно быть помещено в: global. Из-за предыдущего примечания переопределение является глобальным. Чтобы не влиять на другие компоненты Select, параметр должен быть заключен в дополнительное имя класса, чтобы добавить ограничение диапазона.