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

Question

如何更改反应选择中所有元素的悬停？

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

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

Answer 1

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

要专门针对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根据效果的速度终止动画。你可以在这里看到一个活生生的例子。