React自定义同选择器CSS无法覆盖react-select默认hover边框问题

问题根因 #

1. 你给react-select组件添加了Bootstrap的form-control类，该类是为原生表单控件设计的，和react-select自带的样式产生了冲突，额外引入了边框规则。
2. react-select的styles配置项不识别!important标记，你写的!important不会生效，且你同时设置了border和borderColor属性，后者会覆盖前者的颜色配置。
3. 相同权重的CSS规则后加载的会生效，react-select的内置hover样式加载顺序晚于自定义生成的样式，所以默认规则覆盖了你的自定义规则。

修复方案 #

1. 移除冲突类名

把Select组件上的className={'form-control mb-3'}里的form-control去掉，保留你需要的间距类即可，修改为className="mb-3"。

2. 重写customStyles配置

不需要加!important，明确覆盖所有边框、阴影相关属性，同时适配浮动标签的布局：

const customStyles = {
    control: (styles, state) => ({
        ...styles,
        // 统一所有状态下的边框、阴影配置
        border: 'none',
        boxShadow: 'none',
        // 适配浮动标签的高度和内边距
        minHeight: 'calc(3.5rem + 2px)',
        paddingTop: '1.625rem',
        paddingBottom: '0.625rem',
        // 显式覆盖hover状态样式
        '&:hover': {
            border: 'none',
            boxShadow: 'none'
        }
    })
}

3. 完整可运行的FloatingLabelSelect组件代码

import Select from 'react-select';
import { FloatingLabel } from 'react-bootstrap';

const customStyles = {
    control: (styles, state) => ({
        ...styles,
        border: 'none',
        boxShadow: 'none',
        minHeight: 'calc(3.5rem + 2px)',
        paddingTop: '1.625rem',
        paddingBottom: '0.625rem',
        '&:hover': {
            border: 'none',
            boxShadow: 'none'
        }
    })
}

const FloatingLabelSelect = (props) => {
    return (
        <FloatingLabel label={props.label} className={`${props.className} pb-3`}>
            <Select options={props.options} className="mb-3" styles={customStyles}/>
        </FloatingLabel>
    );
};

export default FloatingLabelSelect;

内容的提问来源于stack exchange，提问作者Javier Herrero