CODEWITHSUNDEEP
reactjsreact-select
recile
recile

Reputation: 431

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

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

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

enter image description here

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

Upvotes: 21

Views: 27906

Answers (2)

user19901305
user19901305

Reputation: 

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

Upvotes: 2

Laura
Laura

Reputation: 8630

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.

Upvotes: 52

Related Questions