更改語義 UI Form.Select 元素的選定項背景顏色

Question

我按如下方式導入了語義 UI React

import { Form } from 'semantic-ui-react'

現在，我正在使用他們的 Select 組件，如下所示：

<Form>
  <Form.Group widths="equal">
    <Form.Select //I wish to change the background color of only the selected item
      placeholder={"Choose Item"}
      value={selectedItem}
      className={classes.select}
      onChange={handleItemSelectionChange}
      options={
        items.map((e) => {
          return (
            {
              key: e['name'],
              value: e['name'],
              text: e['name']
            }
          )
        })
      }
    >
    </Form.Select>
  </Form.Group>
</Form>

如何僅更改Form.Select組件中所選項目的背景顏色和圖標顏色。

謝謝。

Answer 1

我沒有在他們的 API 中看到任何內置選項，但是您可以使用 css 實現此目的，默認情況下，所選選項的父 div 具有 class 的“selection”，選項 div 具有 class 的“divider”默認，因此您可以在 css 中添加類似這樣的內容 -

.selection.dropdown > .divider {
  background-color: red;
}

 .selection.dropdown > .divider:before {
    content: "";
    display: block;
    background: url("icon.jpg") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

您還應該查看 react.semantic-ui 下拉組件，它比 select 組件有更多選項，后者只是它的包裝器。