react-select 背景颜色问题

Question

使用 className prop 时遇到问题。我的情况是只有 parent div 获得 class 而 children div 没有。因此，它们最终的背景颜色是白色而不是覆盖颜色。

<Select
    className="games-dropdown-2"
    defaultValue={colourOptions[0]}
    name="color"
    options={colourOptions}
/>

下面是cssclass

.games-dropdown-2 {
  background-color: #023950;
  color: #FFFFFF;
  padding-left: 15px;
  width: 93%;
}

另一个问题是 child div 似乎继承了 grandparent div 的边框 css，这很奇怪。

附上一张图片以供参考。 react-select-classname-issue

Answer 1

对于 v2，使用 style-in-JS 来自定义您的 select 更容易。所以在你的情况下你可以尝试这样的事情：

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} />

如果您需要在不同的文件中使用 select，我建议您创建一个自定义组件，这样您就不必在任何地方重复该样式。

默认情况下，文本将采用一般 CSS 文件中定义的颜色。

Here the live example.

更新

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

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}
   />

react-select 背景颜色问题

react-select background color issues

reactjs

react-select

更新