web-dev-qa-db-ja.com

Ant-Design 'Select'コンポーネントのスタイルを変更するにはどうすればよいですか？

Selectコンポーネントの標準の白い背景色を緑に変更するとします。

私の試み...

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

...それをしませんでした。

誰かが私を正しい方向に向けることができますか？

[編集]

私は Jesper We から提案されたアプローチを使用することになりました。

すべての選択範囲の色を上書きしています...

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

...次に、Selectコンポーネントを個別にスタイル設定できます。

cssreactjsantd
8
joe.hart

<Select>は<div>sのセット全体をレンダリングします。結果のHTML要素ツリーを見て、何をしているかを理解する必要があります。これは、style属性では実行できません。CSSで実行する必要があります。

背景色を付ける適切な場所は

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

これにより、すべての選択が緑になります。選択ごとに異なる色が必要な場合は、classNamesを個別に指定します。

5
Jesper We

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。

結果： enter image description here

6
Hokku San

スタイルの代わりにdropdownStyleを試してください。

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

dropdownStyleは、選択した小道具の1つです。

参照： antd select

3
Junie

上記のすべての回答では、タグのスタイルを条件付きで変更することはできませんが、以下のアプローチでは変更できます。

選択ドロップダウンのタグのように、ハックしてスタイルを変更できます。 2つの引数を取るselectのdropdownRenderを使用できます

  • menuNode
  • 小道具

propsのchildrenプロパティを使用して各タグに到達し、スタイルを変更します。必要に応じて、スタイルを条件に応じて変更できます。

以下の参照は、コードサンドボックスのサンプルリンクです。

タグスタイルサンボックスを選択

それを行うには効率的な方法ではないかもしれませんが、今のところこれを使用してビジネス要件を満たすことができます。

ありがとう

0
divyansh gothwal

彼らは、ant設計のv4でこの機能を実装しました。
https://github.com/ant-design/ant-design/pull/21064

select box with colored tags

しかし、v3-> v4から盲目的にアップグレードする前に注意してください-多くが変更されました：
https://github.com/ant-design/ant-design/issues/20661

0
pkyeck