Reactjs 正确使用react select中的NoOptions Message更改；“没有选择”；文本

我正在尝试更改

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 ...'
/>

null，指示符分隔符：（）=>null，无选项消息：（）=>test}
className=“表格控制公司搜索”
缓存选项
默认选项
value={selectedValue}
getOptionLabel={e=>e.name}
getOptionValue={e=>e.path}
loadOptions={loadOptions}
onInputChange={handleInputChange}
onChange={handleChange}
占位符class='test…'
/>

---

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

有一种记录在案的方法：

您可以定义自己的

NoOptionMessage

组件：

从'react select'导入{components}；
const nooptionmessage=props=>{
返回(
测试…
);
};

---

在

组件

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

有两种方法可以设置自定义组件的样式。您可以将样式对象传递给

styles

prop或创建新的自定义组件

下面的代码显示了这两种方法

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>
  );
}

从“React”导入React；
导入“/style.css”；
从“反应选择”导入选择，{components}；
常量msgStyles={
背景：“天蓝色”，
颜色：“白色”
};
const nooptionmessage=props=>{
返回(
正文
);
};
const customnooptionmessage=（）=>{
返回(
（{…base，…msgStyles}}}
听得见
name=“color”
选项={[]}
/>
);
};
导出默认函数App（）{
返回(
);
}

您可以在此处找到工作代码：