[英]How to change react-select options styles when select
I am using react-select latest to create an async select component.我正在使用 react-select latest 创建一个异步选择组件。 I am trying to change the background color and border color of the select, once I select some value.
一旦我选择了某个值,我就会尝试更改选择的背景颜色和边框颜色。 I went through the document and tried using state.isSelected to conditionally change the background color.
我浏览了文档并尝试使用state.isSelected有条件地更改背景颜色。 But no help.
但没有帮助。
When the value is selected as below, I would like to change the background color and also the border color.当值选择为如下时,我想更改背景颜色以及边框颜色。 But nothing seems to happen.
但似乎什么都没有发生。 Help would be appreciated
帮助将不胜感激
Refer to document: react-select customize styles参考文档:react-select自定义样式
You can override the default provided styles in different domains.您可以覆盖不同域中默认提供的样式。
In this case, the base control would be good enough.在这种情况下,基本控制就足够了。
const customStyles = stateValue => ({
control: (provided, state) => ({
...provided,
backgroundColor: stateValue ? "gray" : "white"
})
});
import React, { useState } from "react";
import Select from "react-select";
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
];
const customStyles = value => ({
control: (provided, state) => ({
...provided,
alignItems: "baseline",
backgroundColor: value ? "gray" : "white"
})
});
const App = () => {
const [selected, setSelected] = useState("");
const onChange = e => {
setSelected(e.value);
};
const onClickButton = () => {
setSelected("");
};
const displayItem = selected => {
const item = options.find(x => x.value === selected);
return item ? item : { value: "", label: "" };
};
return (
<>
<Select
options={options}
styles={customStyles(selected)}
onChange={onChange}
value={displayItem(selected)}
/>
<button onClick={onClickButton}> Clear Selection </button>
</>
);
};
export default App;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.