反应选择背景颜色问题

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

这里有现场的例子。

更新

根据您的评论要求，我更新了上面的代码，并在此处提供了一个新的实时示例。