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

Posted 2021-04-12

我是React noob，也是反应选择的新手（v2）。

我认为我们的方案非常简单。我们从Azure搜索（facet）中提取数据，并希望绑定到稍微定制的反应选择控件。

我们想：

1. 添加徽章/药丸以显示下拉菜单中的计数。
2. 避免循环返回数据以在反应选择选项中重写值和标签。

在这个例子的帮助下，我们得到了大部分的方式（这比官方文档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的原始风格和行为。

您没有为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。