在反应语义中为每个选定的下拉项着色-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

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

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

我还需要知道 select 校正 myOptions 颜色的项目。外观如下：

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

Update

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

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

Answer 1

您不需要为此使用 CSS 样式。并且不需要做任何与样式化组件相关的事情。

SemanticUI lets you use a custom render function for labels.

你会像这样使用它：

const renderLabel = (option) => ({
  color: option.color,
  content: option.text,
})

const myOptions = [
  { text: "option one", color: "blue" },
  { text: "option two", color: "red" },
  // more options...
]

// ...

<Dropdown
  multiple
  fluid
  selection
  options={myOptions}
  onChange={this.navigateToMyFunc}
  renderLabel={renderLabel} // here
/>

这假设您的选项对象有一个 color 属性和一个 text 属性。您需要根据选项对象的形状进行调整。

此外，color 属性需要是可用的 label colors in SemanticUI:

之一

const colors = [
  'red',
  'orange',
  'yellow',
  'olive',
  'green',
  'teal',
  'blue',
  'violet',
  'purple',
  'pink',
  'brown',
  'grey',
  'black',
]

Answer 2

默认语义-ui支持选定的颜色列表。如果您需要自定义标签颜色，您可以添加自定义 css classes 并将 class 名称应用于标签。

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 class 中你可以有以下 classes

.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 函数 class 并在组件中应用它

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}
/>

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

Color each selected Dropdown item in react semantic-ui

javascript

reactjs

semantic-ui

styled-components