如何更改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

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

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

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

根据您要实现的目标，还可以使用其他选项，例如每个state中的components。

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

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

您可能还会根据效果的速度杀死动画ease。您可以看到一个实时示例here。