有什么建议为什么这段代码没有为 Select 设置背景颜色?
我在以下位置创建了一个示例
https://codesandbox.io/s/react-select-basic-forked-3z0kd?file=/src/index.js
答案 0 :(得分:0)
在课堂外添加:
// BACKGROUND STYLES
const customStyles = {
control: (base, state) => ({
...base,
background: "#023950",
// match with the menu
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
// Overwrittes the different states of border
borderColor: state.isFocused ? "yellow" : "green",
// Removes weird border around container
boxShadow: state.isFocused ? null : null,
"&:hover": {
// Overwrittes the different states of border
borderColor: state.isFocused ? "red" : "blue"
}
}),
menu: (base) => ({
...base,
// override border radius to match the box
borderRadius: 0,
// kill the gap
marginTop: 0
}),
menuList: (base) => ({
...base,
// kill the white space on first and last option
padding: 0
})
};
然后在您的 SELECT 上实现它:
<Select
value={this.state.selectedOption}
onChange={this.handleChange}
options={this.options}
styles={customStyles}
/>
这是您使用背景颜色工作的代码: https://codesandbox.io/s/react-select-basic-forked-5uyfb?file=/src/index.js
干杯!