时间戳

首页 > 解决方案 > 在反应语义-ui中为每个选定的下拉项着色

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

问题描述

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

{!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;
  }
`

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

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

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

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

在此处输入图像描述

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

更新

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

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

标签： javascriptreactjssemantic-uistyled-components

解决方案

默认情况下，语义 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}
/>

推荐阅读