How to Style React-Select Options

How to style react-select options

react select v2 (update)

This new version introduces a new styles-api and some other major changes.

Custom Styles

Style individual components with custom css using the styles prop.

const colourStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white' }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled ? 'red' : blue,
      color: '#FFF',
      cursor: isDisabled ? 'not-allowed' : 'default',
      ...
    };
  },
  ...
};

export default () => (
  <Select
    defaultValue={items[0]}
    label="Single select"
    options={items}
    styles={colourStyles}
  />
);

Now there is better documentation and more clear examples on the project's website:

https://react-select.com/upgrade-guide#new-styles-api

https://react-select.com/home#custom-styles

https://react-select.com/styles#styles

react-select v1 ( old answer - deprecated )

Custom classNames

You can provide a custom className prop to the component, which will be added to the base .Select className for the outer container. The built-in Options renderer also support custom classNames.

Add your custom className as a property to objects in the options array:

const options = [
    {label: "one", value: 1, className: 'custom-class'},
    {label: "two", value: 2, className: 'awesome-class'}
    // more options...
];
...
<Select options={options} />

MenuRender

The menuRenderer property can be used to override the default drop-down list of options.

optionClassName String The className that gets used for options

Example: react-select/master/src/utils/defaultMenuRenderer.js

How to change style of react-select selected options?

Here I found a code for it. A very helpful working code.

import React from "react";
import Select,{components} from 'react-select';
import '../App.css'

const options = [
    { value: '*', label: 'Select All' },
  { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
  { value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },
  { value: 'purple', label: 'Purple', color: '#5243AA' },
  { value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
  { value: 'orange', label: 'Orange', color: '#FF8B00' },
  { value: 'yellow', label: 'Yellow', color: '#FFC400' },
  { value: 'green', label: 'Green', color: '#36B37E' },
  { value: 'forest', label: 'Forest', color: '#00875A' },
  { value: 'slate', label: 'Slate', color: '#253858' },
  { value: 'silver', label: 'Silver', color: '#666666' },
];

export default function ReactSelect() {
  const [value,setValue]=React.useState([])

  const  handleChange = (val) => {
    setValue( [...val] );
  }
  return (
    <div id="select">
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen </p>
      <Select
    onChange={handleChange}
    isMulti
    name="colors"
    options={options}
    className="basic-multi-select"
    classNamePrefix="select"
    allowSelectAll={true}
    closeMenuOnSelect={false}
        hideSelectedOptions={false}
    components={{ ValueContainer }}
  />
    </div>
  );
}

const ValueContainer = ({ children, ...props }) => {
  let [values, input] = children;
  if (Array.isArray(values)) {
    const val = (i= Number) => values[i].props.children;
    const { length } = values;
    switch (length) {
      case 1:
        values = `${val(0)} `;
        break;
      default:
        
        const otherCount = length - 1;
        values = `${val(0)}+ ${otherCount} `;
        break;
    }
  }
  return (
    <components.ValueContainer {...props}>
      {values}
      {input}
    </components.ValueContainer>
  );
};

How to style each option of react-select component differently?

You can use the component props to setup a background color base on your options props like this:

const Option = props => {
  return (
    <div style={{ backgroundColor: props.data.color }}>
      <components.Option {...props} />
    </div>
  );
};
const options = [
  { label: "Option 1", value: 1, color: "red" },
  { label: "Option 2", value: 2, color: "orange" },
  { label: "Option 3", value: 3, color: "green" }
];

function App() {
  return (
    <div className="App">
      <Select options={options} components={{ Option }} />
    </div>
  );
}

Like in this live example.

Overriding the style of react select options

You can create a style object to unset all the set rules:

const unsetStyle = {
  all: "unset";
}

// ...

<select
  style={unsetStyle}
  value={value}
  onChange={this.onChange.bind(this)}
>
  {options.map(o => (
    <option style={unsetStyle} value={o.value} key={o.value}>
      {o.text}
    </option>
  ))}
</select>

But as I have already mentioned, you really shouldn't directly target HTML elements in your stylesheets the way they are in your example.

---

Related Topics