CODEWITHSUNDEEP
javascriptreactjsselectreact-select
Gurupal singh
Gurupal singh

Reputation: 146

Unable to change selected option background color | React Select

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"
    />
  );
}

Upvotes: 7

Views: 23721

Answers (5)

Daniel
Daniel

Reputation: 37061

It's also possible with CSS

To start you should add your prefix to the react-select CSS classes, like this

<Select
    classNamePrefix="an-simple-select"
    value={myValue}
    onChange={handleMyValueChange}
    options={myValueOptions}
/>

Then, you can add the following classes to your CSS file, code below set the background of selected to white and also colors with customer color the hovered option

.an-simple-select__option.an-simple-select__option--is-selected {
  background-color: white;
  color: red;
}
.an-simple-select__option:hover {
  background-color: green;
}

Upvotes: 1

emre-ozgun
emre-ozgun

Reputation: 762

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)' }
}),

Upvotes: 4

Nathan Barel
Nathan Barel

Reputation: 388

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",
}),

Upvotes: 10

Archivec
Archivec

Reputation: 331

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.

Upvotes: 2

user17364288
user17364288

Reputation:

You could leverage the hasValue prop instead

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

backgroundColor: state.hasValue ? "rgba(189,197,209,.3)" : "white",

Upvotes: 0

Related Questions