在反应语义 UI 中为每个选定的下拉项着色

Question

我在render方法中有以下jsx代码（ react-semantic-ui ）：

{!this.props.loading &&
      <ControlRow>
        <Grid.Column width={5}>
          <Dropdown
            multiple
            fluid
            selection
            options={myOptions}
            onChange={this.navigateToMyFunc}
          />
...
...

我正在使用styled-components来设计我的元素：

https://github.com/styled-components/styled-components

不幸的是，由于环境的一些奇怪的细节， Dropdown的唯一工作样式是间接来自ControlRow ：

const ControlsRow = styled(Grid.Row)`
  .ui.multiple.dropdown > .label {
    color: white !important;
    background-color: #2185d0;
  }
`

另请参阅以下线程： 使用样式组件包装时，语义 ui 中的下拉菜单不能由多选类型组成

现在，您可以看到Dropdown的类型为multiple 。 每个选定的项目都应根据myOptions选项中的指定进行着色。 我可以将myOptions传递给ControlRow ，这将使数组可以在其中访问，但我不确定如何编写它的styled-components部分：

.ui.multiple.dropdown > .label {
    color: white !important;
    background-color: ${props => props.myOptions..??};
  }

我还需要知道选择正确的myOptions颜色是哪个项目。 这是它的外观：

现在它始终是blue ，但我需要根据每个选项对其进行着色。

更新

似乎它是semantic-ui-react缺少的功能 - 通过hex着色 - 代码（只允许使用一些常规颜色名称） - 所以我将此功能发布到他们的github ：

https://github.com/Semantic-Org/Semantic-UI-React/issues/3889

Answer 1

默认情况下，semantic-ui 支持选定的颜色列表。 如果您需要自定义标签颜色，您可以添加自定义 css 类并将类名应用于标签。

const getOptions = (myOptions : string[]) => {
    return myOptions.map((myValue : string) =>({
        key: myValue,
        text: myValue,
        value: myValue,
        label: { className: setColorClass(myValue), empty: true, circular: true }
    }))
}


function setColorClass(optValue) {
    if (optValue === '1') return 'light-green';
    else if (optValue === '2') return 'sandy-brown';
    else return 'light-coral';

}

在您的 css 类中，您可以拥有以下类

.ui.label.light-green {
    background-color: lightgreen !important;
}
.ui.label.sandy-brown {
    background-color: lightgreen !important;
}
.ui.label.light-coral {
    background-color: lightgreen !important;
}

另外，如果您想在选择值时应用标签圆形颜色，您可以执行以下操作，在您的反应类中编写一个 renderLabel 函数并将其应用到组件中

function renderLabel(label:any){
    return {
        content: `${label.text}`,
        className: setColorClass(label.text)
    }
}   

示例组件

<Dropdown
  search
  selection
  closeOnChange
  value={myValue}
  options={getOptions(myOptions)}
  placeholder='Choose from here'
  onChange={handleDropdownChange}
  renderLabel={renderLabel}
/>

Answer 2

我在render方法中有以下jsx代码（ react-semantic-ui ）：

{!this.props.loading &&
      <ControlRow>
        <Grid.Column width={5}>
          <Dropdown
            multiple
            fluid
            selection
            options={myOptions}
            onChange={this.navigateToMyFunc}
          />
...
...

我正在使用styled-components来设计我的元素：

https://github.com/styled-components/styled-components

不幸的是，由于环境的一些奇怪的细节， Dropdown的唯一工作样式是间接来自ControlRow ：

const ControlsRow = styled(Grid.Row)`
  .ui.multiple.dropdown > .label {
    color: white !important;
    background-color: #2185d0;
  }
`

另请参阅以下线程： 使用样式组件包装时，语义 ui 中的下拉菜单不能由多选类型组成

现在，您可以看到Dropdown的类型为multiple 。 每个选定的项目都应根据myOptions选项中的指定进行着色。 我可以将myOptions传递给ControlRow ，这将使数组可以在其中访问，但我不确定如何编写它的styled-components部分：

.ui.multiple.dropdown > .label {
    color: white !important;
    background-color: ${props => props.myOptions..??};
  }

我还需要知道选择正确的myOptions颜色是哪个项目。 这是它的外观：

现在它总是blue ，但我需要根据每个选项对它进行着色。

更新

似乎它是semantic-ui-react缺少的功能 - hex着色 - 代码（只允许使用一些常规颜色名称） - 所以我将此功能发布到他们的github ：

https://github.com/Semantic-Org/Semantic-UI-React/issues/3889