javascript - 在react语义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;
  }
`

另请参阅以下线程:Dropdown in semantic ui can't be made of multiple selection type when wrapped with styled-components

现在，如您所见，下拉菜单的类型为multiple。每个选定的项目应根据 myOptions 选项中指定的颜色。我可以将 myOptions 传递给 ControlRow ，这将使数组可以在其中访问，但我不确定如何编写 styled-components > 部分内容:

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

我还需要知道是哪个项目才能选择正确的 myOptions 颜色。其外观如下:

现在它总是蓝色，但我需要根据每个选项为其着色。

Update

似乎这是 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;
}

此外，如果您想在选择值时应用标签圆形颜色，您可以执行以下操作，在您的 React 类中编写一个 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}
/>