Is there any way to change the styling based on react State.

[RabzTims-04]

I want to change the background color of my Menu and control. I am already passing CustomStyles Object to my styles property on Select. But I want to change the background color depending on some boolean value:
For example:
customStyle:{
option: (provided) => ({
...provided,
backgroundColor: bg ? "red" : "blue"
})
}

My question is how can I pass this bg prop? This prop is coming from my react component.

[manjushsh]

@RabzTims-04 Something like this?

const styles = {
    option: (styles, { data }) => {
      return {
        ...styles,
        backgroundColor: data.isRedWhite ? "red" : styles.backgroundColor,
        color: data.isRedWhite ? "white" : styles.backgroundColor,
        ":hover": {
          backgroundColor: "green"
        }
      };
    }
  };

In Options which can have state value

const optionsAbsentPresent = [
  {
    value: 0,
    label: "absent",
    isRedWhite: true
  },
  {
    value: 1,
    label: "present",
    isRedWhite: true
  }
];

Code Sandbox

React Select styling Docs

[RabzTims-04]

Unfortunately no, 😓

I am using my Dropdown component in another component. From there I want to pass Background color as props. For example, I want to change the style of my dropdown based on the background of the page.
Like if the background color of my main page is white then the background color of my options and controls should be yellow else it is red.

[RabzTims-04]

I actually found the solution. It was so simple 😅.
I can just pass it as normal props in //bg is a boolean value and then in customStyles, I can access it using state.selectProps.bg