时间戳

首页 > 解决方案 > 更改语义 UI Form.Select 元素的选定项目背景颜色

javascript - 更改语义 UI Form.Select 元素的选定项目背景颜色

问题描述

我有如下导入的语义 UI React

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

现在，我正在使用他们的选择组件，如下所示：

<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组件中所选项目的背景颜色和图标颜色。

谢谢你。

标签： javascriptreactjssemantic-uisemantic-ui-react

解决方案

我在他们的 API 中没有看到任何内置选项，但是您可以使用 css 来实现这一点，所选选项的父 div 默认有一个“选择”类，而选项 div 有一个“除法器”类默认，所以你可以在你的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 组件，它只是一个包装器。

推荐阅读