reactjs - react 选择背景颜色问题

Question

使用 className 属性时遇到问题。对我来说发生的事情是，只有父级 div 获得了类(class)，而子级 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 似乎从祖 parent div 继承了边框 css，这很奇怪。

附加图像以提供想法。 react-select-classname-issue

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

Here the live example .

更新

根据您在评论中的请求，我更新了上面的代码和 here a new live example .