反应选择背景颜色问题 [英] react-select background color issues

问题描述

在使用 className 道具时遇到问题.对我来说发生的事情是只有父 div 获得课程，而儿童 div 没有.结果，它们最终的背景颜色为白色，而不是覆盖颜色.

<选择className="games-dropdown-2"默认值={colorOptions[0]}名称=颜色"选项={颜色选项}/>

下面是css类

.games-dropdown-2 {背景色:#023950；颜色:#FFFFFF；左边距:15px；宽度:93%；}

另一个问题是子 div 似乎从祖父 div 继承了边框 css，这很奇怪.

附上图片以提供想法.如果您需要在不同的文件中使用如此选择，我建议您创建一个自定义组件，这样您就不必到处重复样式.

默认情况下，文本将采用通用 CSS 文件中定义的颜色.

Having a problem with using className prop. What's happening for me is that only the parent div gets the class and the children divs don't. As a result, they end up having background color white instead of the override color.

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

Below is the css class

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

Another problem is that the child div seems to be inheriting border css from the grandparent div which is weird.

Attaching an image to give idea. react-select-classname-issue

解决方案

For v2 it's way easier to use style-in-JS in order to customize your select. So in your case you can try something like this:

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

If you need to use thus select in different files I would recommend to create a custom component so you won't have to repeat the style everywhere.

By default the text will take the color define in your general CSS file.

Here the live example.

UPDATE

Following your request in comment I have updated the code above and here a new live example.

这篇关于反应选择背景颜色问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！