反应选择背景颜色问题

Question

使用 className 属性时遇到问题。 对我来说发生的事情是，只有父级 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，这很奇怪。

附上图片以提供想法。

Answer 1

对于 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 文件中定义的颜色。

这是实例。

更新

根据您在评论中的请求，我更新了上面的代码，并且这里有一个新的实时示例。

Answer 2

您可以像下面这样解决背景颜色问题，人们也遇到了一些 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}
   />

Answer 3

这是CSS还是JS？对于CSS来说它是i

what is the const colourStyles = {
menuList: styles => ({
    ...styles,
    back```

?