定义自定义选项组件时，如何为 react-select 应用默认样式？

Question

我是 React 菜鸟，也是 react-select (v2) 的新手。

我认为我们的场景相当简单。我们正在从 Azure 搜索（构面）中提取数据，并希望绑定到稍微定制的 react-select 控件。

我们希望：

1. 添加徽章/药丸以在下拉列表中显示计数。
2. 避免循环遍历返回的数据以在 react-select 选项中欺骗值和标签。

在这个例子的帮助下（比官方文档 IMO 更有帮助），我们已经完成了大部分工作：React-Select - Replacing Components for custom option content。唯一缺少的是应用默认的反应选择样式（例如：悬停）。

数据示例：

const myOptions = [
    { value: 'foo', count: 100 },
    { value: 'bar', count: 200 },

];

自定义控件示例：

const CustomOption = (props:any) => {
    const { innerProps, innerRef } = props;
    return (
        <article ref={innerRef} {...innerProps} >
            <div style={{display:"inline-block"}}>{props.data.value}</div>
            <span className="badge badge-light float-right" style={{display:"inline-block"}}>{props.data.count} </span>
        </article>
    );
};

有没有办法重用默认的 react-select 样式？我在文档中遗漏了什么吗？

Answer 1

你真的是布，但让我告诉你如何保持react-select的原始风格和行为。

您无需为 Option 组件声明新容器，而是需要使用原始容器，并且只需像这样编辑内容：

const Option = props => {
  return (
    <components.Option {...props}>
      <div style={{ display: "inline-block" }}>{props.data.value}</div>
      <span
        className="badge badge-light float-right"
        style={{ display: "inline-block" }}
      >
        {props.data.count}{" "}
      </span>
    </components.Option>
  );
};

这里更新了您的代码的live example。