我正在尝试为react-select做一些样式设计。到目前为止,我已经做了this。我需要做的是更改“无选项消息”的颜色。但是,正如我们在沙箱中看到的那样,颜色不会随noOptionsMessageCSS
更改。那么,如何改变呢?
这是链接断开的代码:
import React from "react";
import Select from "react-select";
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" },
{ value: "cream", label: "Cream" },
{ value: "blueberry", label: "Blueberry" },
{ value: "bubblegum", label: "Bubble Gum" },
{ value: "cherry", label: "Cherry" },
{ value: "cheese", label: "Cheese" },
{ value: "mocca", label: "Mocca" },
{ value: "cappucino", label: "Cappucino" },
{ value: "mint", label: "Mint" }
];
class App extends React.Component {
state = {
selectedOption: options[0]
};
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
render() {
const { selectedOption } = this.state;
const style = {
// option: (base, state) => ({
// ...base,
// borderBottom: '1px dotted pink',
// color: state.isSelected ? 'red' : 'blue',
// padding: 20,
// }),
option: (base, state) => ({
...base,
backgroundColor: state.isSelected ? "grey" : "grey",
color: state.isSelected ? "white" : "black",
":active": {
backgroundColor: state.isSelected ? "grey" : "grey",
color: state.isSelected ? "white" : "white"
}
}),
control: (base, state) => ({
...base,
background: "white",
borderRadius: 0,
borderTop: 0,
borderLeft: 0,
borderRight: 0,
// This line disable the blue border
borderColor: state.isFocused ? "black" : "black",
// boxShadowColor: 'red',
boxShadow: state.isFocused ? 0 : 0
}),
menu: base => ({
...base,
// override border radius to match the box
borderRadius: 0,
// beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
hyphens: "auto",
// kill the gap
marginTop: 0,
textAlign: "left"
// prevent menu to scroll y
// wordWrap: "break-word"
}),
menuList: (base, state) => ({
...base,
// kill the white space on first and last option
padding: 0,
backgroundColor: "grey",
maxHeight: "80px",
overflowY: "auto"
}),
indicatorSeparator: (base, state) => ({
...base,
display: "none"
}),
dropdownIndicator: (base, state) => ({
...base,
transition: "all .2s ease",
transform: state.isFocused ? "rotate(180deg)" : null
}),
noOptionsMessageCSS: (base, state) => ({
...base,
color: "white",
backgroundColor: "blue"
})
// container: (base, state) => ({
// ...base,
// backgroundColor: "blue",
// color: "red"
// })
};
return (
<div style={{ width: "50%", margin: 20 }}>
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
isClearable={true}
styles={style}
placeholder="Please Input"
noOptionsMessage={() => "Zero Result"}
/>
</div>
);
}
}
export default App;
谢谢!
最佳答案
将noOptionsMessageCSS
更改为noOptionsMessage
,它应该可以工作。
看起来像doc is incorrect。