小编dig*_*ill的帖子

我想使用 react-select 并在将页面背景颜色从白色更改为自定义后遇到了一系列问题。（问题在白色背景上并不像在 react-select 的 github 页面上那么明显）

我正在通过样式道具执行上述操作，因为 className 道具无法正常工作。

这是样式道具。

const colourStyles = {
    control: styles => ({ ...styles, backgroundColor: '#023950', color: 'white', border: 0 }),
    option: (styles) => {
        return {
            backgroundColor: '#023950',
            color: 'white'
        };
    },
    singleValue: styles => ({ ...styles, color: 'white' }),
};

这是问题列表，如果有人可以帮助解决这些问题。请参考附图。

1. 注意下拉菜单和选项之间的差距（当你点击下拉菜单打开选项时）
   • 如果你在这里看到http://jedwatson.github.io/react-select/，没有间隙但你也看不到源代码。单击源链接会显示 404。
   • 这里的所有演示，https://react-select.com/styles，都有这个差距问题。
2. 顶部和底部有一个白色间隙（在选项本身内）。这与第 1 点中提到的下拉菜单中的间隙不同。该间隙是透明的，显示了后面的内容。这个是白色的。
3. 长文本导致选项导致整个选项框出现奇怪的空白问题。有没有办法剪辑文本并将其转换为省略号，而不是使选项框更宽并具有水平滚动？
4. 与上述问题有关。如何关闭水平滚动。想要文本剪辑。
5. 关于使用 className 道具的问题，该类确实得到了应用。但是，只有 1 个最上面的 div。它不适用于子 div，它最终在 backgroundColor 中保持白色。

反应选择样式问题

使用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。

附加图像以提出想法。 反应选择类名问题