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

Kana

Could you be more specific on what kind of result you expect ? thanks – Paronymous

border, text and arrow – Kana

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.

Paronymous

and how you can do everything at once hover? – Kana

Answer 2

  styles={{
                      control: (base) => ({
                        ...base,
                        border: `1px solid #e5e7eb`,
                        borderRadius: "0.5rem",
                        boxShadow: "none",
                        "&:hover": {
                          border: "1px solid #f6bf63cc",
                        },
                      }),
                    }}

Agminate