使用 className props时遇到问题。对我来说发生的事情是只有父 div 获得课程，而儿童 div 没有。结果，它们最终的背景颜色为白色，而不是覆盖颜色。
<Select
className="games-dropdown-2"
defaultValue={colourOptions[0]}
name="color"
options={colourOptions}
/>
下面是css类
.games-dropdown-2 {
background-color: #023950;
color: #FFFFFF;
padding-left: 15px;
width: 93%;
}
另一个问题是子 div 似乎从祖父 div 继承了边框 css，这很奇怪。
附上图像以提供想法。 react选择类名问题
对于 v2，使用 style-in-JS 来自定义您的选择会更容易。所以在你的情况下，你可以尝试这样的事情：
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 styles={customStyles} options={options} />
如果您需要在不同的文件中使用如此选择，我建议您创建一个自定义组件，这样您就不必在任何地方重复该样式。
默认情况下，文本将采用通用 CSS 文件中定义的颜色。
根据您在评论中的请求，我更新了上面的代码，这里有一个新的实时示例。
你可以像下面一样解决你的背景颜色问题，人们也遇到了一些 z-index 问题也解决了
const colourStyles = {
menuList: styles => ({
...styles,
background: 'papayawhip'
}),
option: (styles, {isFocused, isSelected}) => ({
...styles,
background: isFocused
? 'hsla(291, 64%, 42%, 0.5)'
: isSelected
? 'hsla(291, 64%, 42%, 1)'
: undefined,
zIndex: 1
}),
menu: base => ({
...base,
zIndex: 100
})
}
const options = [
{value: 'chocolate', label: 'Chocolate'},
{value: 'strawberry', label: 'Strawberry'},
]
<Select
// defaultValue={[colourOptions[2], colourOptions[3]]}
name="colors"
options={options}
className="basic-multi-select"
classNamePrefix="select"
styles={colourStyles}
/>