如何在 react-select 中更改所有元素（边框、文本和箭头）的悬停？

Question

如何在 react 中更改所有元素的悬停-select?

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

源主机：https://codesandbox.io/s/react-codesandboxer-example-8iq7b

Answer 1

要自定义您的 select，您可以使用道具 styles。列出了您可以更改的所有不同组件 here。

要专门针对 hover 状态，您应该使用以下模式：

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

其他选项可用，例如每个 components 中的 state，具体取决于您要实现的目标。

如果您希望所有元素的行为都取决于 control 组件的状态，您将必须编写如下内容：

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

根据效果的速度，您可能还会终止动画 ease。你可以看到一个活生生的例子 here.

如何在 react-select 中更改所有元素（边框、文本和箭头）的悬停？

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

reactjs

react-select