CODEWITHSUNDEEP
javascriptreactjssemantic-uistyled-components
Nikita Vlasenko
Nikita Vlasenko

Reputation: 4352

Color each selected Dropdown item in react semantic-ui

I have the following jsx code (react-semantic-ui) in render method:

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

And I am using styled-components to style my elements:

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

Unfortunately the only working styling for the Dropdown due to some weird specifics of the environment is indirect from ControlRow:

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

See also the following thread: Dropdown in semantic ui can't be made of multiple selection type when wrapped with styled-components

Now the Dropdown as you can see is of type multiple. Each selected item should be colored according to the specified in the myOptions options. I can pass myOptions to the ControlRow which will make the array to be accessible in it, but I am not sure how to write the styled-components part of it:

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

I need to also know which item it is to select correct myOptions color. Here is how it looks:

enter image description here

Right now it is just always blue, but I need it to be colored according to each option.

Update

Seems like it is an absent feature in semantic-ui-react - coloring by hex - codes (only a few regular color names allowed) - so I posted this feature to their github:

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

Upvotes: 1

Views: 4730

Answers (2)

ony19161
ony19161

Reputation: 73

by default semantic-ui supports selected list of colors. If you need custom label color, you can add your custom css classes and apply the class name to the label.

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';

}

in your css class you can have the following 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;
}

Also if you want to apply label circular color when the value is selected, you can do the following, write a renderLabel function in your react class and apply it in the compnent

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

Sample component

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

Upvotes: 2

Raicuparta
Raicuparta

Reputation: 2115

You don't need to use CSS styling for this. And nothing related to Styled Components needs to be done.

SemanticUI lets you use a custom render function for labels.

You would use it like this:

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

This assumes that your option objects have a color property and a text property. You'll need to adjust to the shape of your option objects.

Also, the color property will need to be one of the available label colors in SemanticUI:

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

Upvotes: 2

Related Questions