Вопрос:
Предположим, я хочу изменить стандартный белый цвет фона компонента Select на зеленый.
Моя попытка…
<Select style={{ backgroundColor: ‘green’ }}> // Options… </Select>
… не сделал этого.
Может ли кто-нибудь указать мне в правильном направлении?
[РЕДАКТИРОВАТЬ]
В итоге я использовал предложенный подход от Jesper We.
Переписывание цвета для всех выборов…
.ant-select-selection { background-color: transparent; }
… тогда я мог бы индивидуально настраивать компоненты Select.
Лучший ответ:
<Select> отображает весь набор <div> s, вам нужно взглянуть на полученное дерево элементов HTML, чтобы понять, что вы делаете. Вы не можете сделать это через атрибут стиля, вам нужно сделать это в CSS.
Правильное место для прикрепления фона
.ant-select-selection { background-color: green; }
Это сделает все ваши зеленые выделения. Дайте им индивидуальное имя className если вы хотите разные цвета для разных вариантов.
Ответ №1
Для моей формы с помощью элемента 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 для раскраски.
Результат:
Ответ №2
Попробуйте dropdownStyle вместо стиля.
<Select dropdownStyle={{ backgroundColor: ‘green’ }}> // Options… </Select>
dropdownStyle является одним из избранных реквизитов.
ссылка: и выбор
Ответ №3
со всеми приведенными выше ответами вы не можете изменить стили тегов условно, но с нижеследующим подходом вы можете.
Вы можете взломать и изменить стили, как вам нравится теги выпадающего списка. Вы можете использовать dropdownRender для выбора, который принимает 2 аргумента
- menuNode
- реквизит
Используйте свойство props children для доступа к каждому тегу и изменения стилей, и вы можете условно изменять стили по своему усмотрению.
для справки ниже приведен пример ссылки для кода песочницы
Выбрать теги Стили Санбокс
Это может быть неэффективный способ сделать это, но вы можете использовать это сейчас, чтобы удовлетворить ваши бизнес-требования.
Спасибо