Unable to change selected option background color | React Select

user_2814725 0
Viewed 5382

i am using React select component for my dropdown selections. All functionality is working fine but i am unable to style the selected option background color when the option is selected from the dropdown. Tried few options but that too not working.

Below is the code for the same :-

import React, { useContext, useState } from "react";
import moment from "moment";
import Select from "react-select";
import DataProvider from "context/DataContext";

export default function Compare() {
  const [selectedValue, setSelectedValue] = useState([]);
  const {
    fromDate,
    toDate,    
  } = useContext(DataProvider);

  const customStyles = {           
    option: (base, state) => ({
      ...base,      
      color: "#1e2022",
      backgroundColor: state.isSelected ? "rgba(189,197,209,.3)" : "white",
      padding: ".5rem 3rem .5rem .5rem",
      cursor: "pointer",
    }),       
    singleValue: (provided, state) => {
      const opacity = state.isDisabled ? 0.5 : 1;
      const transition = "opacity 300ms";

      return { ...provided, opacity, transition };
    },
  };

  const options = [
    {
      value: [
        moment(fromDate).subtract(1, "days"),
        moment(toDate).subtract(1, "days"),
      ],
      label: "Previous Day",
    },
    {
      value: [
        moment(fromDate).subtract(7, "days"),
        moment(toDate).subtract(7, "days"),
      ],
      label: "Previous Week",
    },
  ];

  const handleApply = (event) => {
    setSelectedValue(event);
  };

  return (
    <Select
      onChange={handleApply}
      options={options}
      styles={customStyles}
      placeholder="Compare to Past"
    />
  );
}
react-select reactjs select javascript
4 Answers

In order to change only the backgroundColor of the selected option try this:

option: (provided, state) => ({
    ...provided,
    backgroundColor: state.isSelected ? "rgba(189,197,209,.3)" : "white",
}),
user_135250460

There is an issue regarding this. Apparently isSelected is only provided for multi-select. For single-select you could check for:

state.data === state.selectProps.value

https://github.com/JedWatson/react-select/issues/3817

[Edit] This seems really weird but it appears that if you declared the options outside of the component it works. Check here. If you copied the options inside the render function then the styling won't work. It's not a problem with the values being Dates or moment objects or something as I tried setting the values as "1" and "2".

[Edit 2] Ok emm.. I refactored it to be a functional component and it works with the options being inside the component. I'm guessing it may be a problem with utilizing hooks. Same sandbox to look at.

user_157048250
Admin1

Appending to @Nathan's answer above, include &hover if you don't want the background color to change on hover!

option: (provided, state) => ({
  ...provided,
  backgroundColor: state.isSelected ? '#192E49' : 'inherit',
  '&:hover': { backgroundColor: state.isSelected ? '#192E49' : 'rgb(222, 235, 255)' }
}),
user_115471300
Related