how to change hover for all elements ( border, text and arrow ) in react-select?

Question

how to change hover for all elements in react-select?

<Select
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
  />

Source host: https://codesandbox.io/s/react-codesandboxer-example-8iq7b

Answer 1

To customise your select, you can use the props styles. All the different components you can change are listed here.

To target specifically the hover state you should use the follow pattern:

const styles = {
    control: base => ({
      ...base,
      "&:hover": {
        borderColor: "red"
      }
    })
  };

Other options are available such as the state inside each components depending of what you're trying to achieve.

If you want all the elements to behave depending of the state of the control component you will have to write something like this:

  const styles = {
    control: base => ({
      ...base,
      "&:hover": {
        borderColor: "red",
        color: "red"
      }
    }),
    dropdownIndicator: base => ({
      ...base,
      color: "inherit"
    }),
    singleValue: base => ({
      ...base,
      color: "inherit"
    })
  };

You would probably also kill the animation ease depending of the speed of the effect. You can see a live example here.