为React语义UI中的每个选定的Dropdown项目着色

debugcn 发表于 Dev

尼基塔（Nikita Vlasenko）

我在方法中有以下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;
  }
`

另请参见以下线程：用样式化组件包装时，语义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

里卡多·洛佩斯（Ricardo Lopes）

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

SemanticUI允许您将自定义渲染功能用于标签。

您可以这样使用它：

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属性将必须是SemanticUI中可用的标签颜色之一：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。