正确使用react-select中的NoOptionsMessage来改变"no options"文本

Question

我正在尝试更改 react-select 中的“无选项”消息？我能够使用以下代码做到这一点

<AsyncSelect 
    styles={customStyles} 
    components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null, NoOptionsMessage: () => "test" }} 
    className="form-control firm-search"
    cacheOptions
    defaultOptions
    value={selectedValue}
    getOptionLabel={e => e.name}
    getOptionValue={e => e.path}
    loadOptions={loadOptions}
    onInputChange={handleInputChange}
    onChange={handleChange}
    placeholder='test ...'
/>

问题是文本不再有样式。是否可以更改文本但保留默认样式？如果不是，是否可以将 CSS 应用于新文本？

Answer 1

有记录的方法可以做到这一点：https://react-select.com/components

您可以定义自己的 NoOptionMessage 组件：

import { components } from 'react-select';

const NoOptionsMessage = props => {
  return (
     <components.NoOptionsMessage {...props}>
        Test…
     </components.NoOptionsMessage>
  );
};

在 components 模块中，您可以访问每个本机实现，因此您无需重新发明轮子。

Answer 2

自定义组件的样式有两种方式。您可以将样式对象传递给 styles 道具或创建新的自定义组件。

以下代码显示了这两种方法。

import React from "react";
import "./style.css";
import Select, { components } from "react-select";

const msgStyles = {
  background: "skyblue",
  color: "white"
};

const NoOptionsMessage = props => {
  return (
    <components.NoOptionsMessage {...props}>
      <span className="custom-css-class">Text</span> 
    </components.NoOptionsMessage>
  );
};

const CustomNoOptionsMessage = () => {
  return (
    <Select
      isClearable
      components={{ NoOptionsMessage }}
      styles={{ noOptionsMessage: base => ({ ...base, ...msgStyles }) }}
      isSearchable
      name="color"
      options={[]}
    />
  );
};

export default function App() {
  return (
    <div>
      <CustomNoOptionsMessage />
    </div>
  );
}

在这里你可以找到工作代码：https://stackblitz.com/edit/react-lejn8c?file=src/App.js

Answer 3

另一种方法：

<AsyncSelect
  isClearable
  defaultOptions
  cacheOptions
  defaultOptions
  value={selectedValue}
  getOptionLabel={e => e.name}
  getOptionValue={e => e.path}
  loadOptions={loadOptions}
  onInputChange={handleInputChange}
  onChange={handleChange}
  noOptionsMessage={({inputValue}) => !inputValue ? noOptionsText : "No results found"} 
/>

正确使用react-select中的NoOptionsMessage来改变"no options"文本

Properly use NoOptionsMessage in react-select to change the "no options" text

reactjs

react-select