web-dev-qa-db-fra.com

Comment changer le style d'un composant 'Select' Ant-Design?

Supposons que je veuille changer la couleur de fond blanche standard du composant Select en vert.

Mon essai ...

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

... ne l'a pas fait.

Quelqu'un peut me diriger dans la bonne direction?

[MODIFIER]

J'ai fini par utiliser l'approche suggérée par Jesper We .

Écraser la couleur pour toutes les sélections ...

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

... alors je pourrais appeler les composants Select individuellement.

cssreactjsantd
3
joe.hart

<Select> rend tout un ensemble de <div>s, vous devez jeter un coup d'œil à l'arborescence des éléments HTML obtenue pour comprendre ce que vous faites. Vous ne pouvez pas le faire via l'attribut style, vous devez le faire en CSS.

Le bon endroit pour attacher une couleur de fond est

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

Cela rendra toutes vos sélections vertes. Donnez-leur classNames individuel si vous voulez différentes couleurs pour différentes sélections.

2
Jesper We

Pour ma fiche avec l'élément Select, il y a du code dans 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>
    ....
)

Et quelques css à colorier.

Résultat :  enter image description here

1
Hokku San

Essayez dropdownStyle au lieu de style.

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

dropdownStyle est l’un des accessoires sélectionnés.

référence: https://ant.design/components/select/

0
Junie