React-Select背景设为灰色后仍有白色区域，如何去除？

你需要补充修改几个React-Select的样式节点，覆盖默认的白色背景和边框：

修改后的样式配置 #

const selectStyles = {
    control: (styles, state) => ({
        ...styles, 
        fontFamily: "myFont",  
        borderColor: handleBorderColor(state.isSelected, state.isFocused), 
        backgroundColor: "rgb(164, 162, 162)"
    }),
    label: (styles) =>({...styles, color: "white"}),
    // 下拉菜单容器：设置灰色背景，移除默认白色边框
    menu: (styles) => ({
        ...styles, 
        backgroundColor: "rgb(164, 162, 162)",
        border: "none",
        boxShadow: "none" // 可选：移除默认阴影，避免视觉上的白色边缘
    }),
    // 选项列表容器：统一灰色背景，移除默认内边距
    menuList: (styles) => ({
        ...styles, 
        backgroundColor: "rgb(164, 162, 162)",
        padding: 0
    }),
    option: (styles, {data, isDisabled, isFocused, isSelected}) => {
        return ({
            ...styles, 
            fontFamily: "myFont", 
            color: isFocused ? "black" : "white", 
            backgroundColor: backgroundDifferentOptions(isSelected, isFocused),
            // 移除选项默认边框，或设置为灰色（根据需求调整）
            borderColor: "rgb(164, 162, 162)",
            outline: "none",
            // 可选：添加选项间的灰色分隔线，替代白色间隙
            borderTop: isSelected || isFocused ? "none" : "1px solid rgb(120, 120, 120)"
        })  
    },
    // 可选：确保选中项的文本颜色为白色
    singleValue: (styles) => ({...styles, color: "white"})
}

简化背景色判断函数（可选） #

你的backgroundDifferentOptions逻辑可以简化，因为选中或聚焦时返回的颜色一致：

const backgroundDifferentOptions = (isSelected, isFocused) =>{
    return isFocused || isSelected ? "#69CBECFF" : "rgb(164, 162, 162)";
}

关键修改说明 #

• menu：覆盖下拉菜单外层容器的默认白色背景和边框，彻底消除容器级的白色区域。
• menuList：移除选项列表的默认内边距，避免容器与选项之间出现白色空隙。
• option：通过borderColor和outline设置，消除选项上下的白色边框；如果需要选项间的分隔线，用灰色替代白色。
• singleValue：确保选中后显示的文本颜色与灰色背景适配，避免看不清文字。

内容的提问来源于stack exchange，提问作者David Del Toro