React-Select 的背景颜色

Question

我将 React-Select 的背景更改为灰色，但它仍然有一些我想删除的白点。是否可以？ 你可以看到选项上方和下方都有白色边框，我想将它们变成灰色。

**This is my code:** 
  <Select
        defaultValue = {{label: "Ascending", value: "A", color: "white"}}
        options ={orders}
        onChange={handleOrder}
        styles={selectStyles}
      />

**This is the function for styles:** 
const selectStyles = {
    control: (styles, state) => ({...styles, fontFamily: "myFont",  borderColor: handleBorderColor(state.isSelected, state.isFocused), backgroundColor: "rgb(164, 162, 162)"}),
    label: (styles) =>({...styles, color: "white"}),
    option: (styles, {data, isDisable, isFocused, isSelected}) => {
      return ({...styles, fontFamily: "myFont", color: isFocused ? "black" : "white", backgroundColor: backgroundDifferentOptions(isSelected, isFocused), borderColor: "black"})  
    },
  }

**This is what I'm using to change the background color:** 
  const backgroundDifferentOptions = (isSelected, isFocused) =>{
    if (isSelected && isFocused) return "#69CBECFF"
    if (!isSelected && isFocused) return "#69CBECFF";
    if (isSelected && !isFocused) return "rgb(164, 162, 162)";
    if (!isSelected && !isFocused) return "rgb(164, 162, 162)";

到目前为止我还没有找到任何相关信息。如果您知道如何帮助我，我将不胜感激。

Answer 1

您可以设置样式

menuList

。这是一个工作的DEMO

menuList: (provided, state) => ({
    ...provided,
    paddingTop: 0,
    paddingBottom: 0
  })
};