反应选择背景颜色问题答案

【问题标题】：react-select background color issues反应选择背景颜色问题
【发布时间】：2019-01-16 10:36:01
【问题描述】：

在使用 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，这很奇怪。

附上图片以提供想法。 react-select-classname-issue

【问题讨论】：

您使用的是哪个版本的 react-select？ v1 还是 v2 ？
package.json 说 "react-select": "^2.0.0" 所以 v2.
您能否提供一个屏幕截图，以确保我看到的问题与您相同？我想我有答案
我已经附上了。只需点击上面的链接，上面写着“附加图片以提供想法”。

标签： reactjs react-select

【解决方案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。

【讨论】：

非常感谢您提供的实时示例。是的，我也尝试过，但遇到了另一组问题。 stackoverflow.com/questions/51760037/…我会给你一个例子。无论如何，您会知道这两件事的答案吗 1. 如何消除下拉菜单与其选项之间的差距？ 2. 选项 1 上方和选项 5 下方也有一个白色缺口。如何摆脱它。基本上只是得到一个扁平的矩形框。我在其他帖子中也有更多详细信息。
@user3267324 我已经更新了我的例子，希望对你有帮助。
非常感谢。我会试一试：D

【解决方案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}
   />

【讨论】：