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

Question

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

Моя попытка...

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

... не делал этого

Может ли кто-нибудь указать мне правильное направление?

[РЕДАКТИРОВАТЬ]

Я закончил тем, что использовал предложенный подход от Jesper We.

Перезаписывая цвет для всех выборов...

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

... тогда я мог бы стилизовать компоненты Select по отдельности.

Answer 1

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

Правильное место, чтобы прикрепить цвет фона

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

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

Answer 2

Для моей формы с элементом Select есть код в 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 для раскрашивания.

Результат:

Answer 3

Попробуйте dropdownStyle вместо стиля.

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

dropdownStyle является одним из избранных реквизитов.

ссылка: https://ant.design/components/select/

Answer 4

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

.ant-select-selection {...

Однако селектор должен быть следующим:

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

Answer 5

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

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

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

// TestPage.ts import {Select} from 'antd'; импортировать стили из './TestPage.less';const Option = Select.Option;

const children = []; для (пусть я = 10; я< 36; я ++) {children.push({i.toString(36) + i});}

ReactDOM.render({children}

, mountNode,);// TestPage.less.customSelect {:global {.ant-select-selection {max-height: 51px; перелив: авто; } } } Следует отметить два момента:

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

Answer 6

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

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

• menuNode
• реквизит

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

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

Выбрать теги Стили Санбокс

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

Спасибо

Answer 7

Наконец, я работал над раскрывающимся списком муравьев, и он не получил стиля, как я хотел, и я не нашел для этого хорошего решения.

Тогда я решил поделиться своим css-решением для тех, кто попал в мою ситуацию:

Answer 8

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

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

Answer 9

      menuItemSelectedIcon={(props) => {
                return (mode == "multiple" ?
                  <Tooltip title="Check to confirm the apps alongwith the vendor">
                    <input type="checkbox" checked={props.isSelected}
                      style={{
                        margin: 5
                      }}
                    />
                  </Tooltip>
                  : null)
              }}

Answer 10

В angular вы можете переопределить стиль с помощью ng-deep

      ::ng-deep .ant-select-selector {
  background-color: red;
}