react-select className样式不生效，如何用SCSS自定义或禁用预设样式？

问题背景 #

刚上手react-select，想用SCSS添加自定义样式但没效果，知道可以用组件的styles属性设置样式，但更倾向于用简洁的SCSS方式实现。

效果对比 #

• 期望效果：
  
• 实际效果：
  

一、让自定义SCSS生效的方案 #

1. 类名穿透（推荐） #

react-select的内部元素自带默认类名，外部直接编写的类名优先级不足，需要用CSS预处理器的穿透语法选中内部元素（不同环境穿透语法略有区别：webpack+SCSS用::v-deep，普通环境可用>>>，也可以直接通过浏览器调试工具查看实际默认类名进行嵌套选择）。

示例SCSS代码：

.shippingCountryDropdownElement {
  // 穿透选中react-select的控件容器
  ::v-deep .css-13cymwt-control {
    border: none;
    height: 42px;
    background-color: red;
    outline: none;
    cursor: pointer;
    
    &:focus {
      box-shadow: none;
    }
  }
  // 穿透选中下拉框的文本元素
  ::v-deep .css-1uccc91-singleValue {
    color: gray;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
  }
}

2. 禁用react-select默认样式 #

可以直接导入不带预设样式的react-select版本，完全自主定制所有样式：

import Select from 'react-select/dist/react-select.esm';

这个版本仅提供组件交互逻辑，无任何默认样式，你可以基于自己的.shippingCountryDropdownElement类，完全定制控件、下拉菜单、选项等所有元素的样式。

也可以通过styles属性批量重置默认样式，再配合SCSS细化：

const customStyles = {
  control: (base) => ({
    ...base,
    border: 'none',
    height: '42px',
    backgroundColor: 'red',
    // 其他基础重置样式
  })
};

<Select className="shippingCountryDropdownElement" styles={customStyles} />

二、替代下拉组件推荐 #

如果觉得react-select样式定制过于繁琐，可以试试这些组件：

• MUI Select：Material Design风格，支持主题与SCSS定制，生态完善，适合需要规范UI的项目。
• Downshift：无样式的下拉逻辑库，仅处理交互（下拉展开、选中、键盘导航等），完全由你用SCSS控制样式，自由度拉满。
• Chakra UI Select：基于Chakra主题系统，样式修改简单，自带无障碍支持，适合快速开发。
• React Dropdown：轻量级组件，默认样式简洁，容易通过SCSS覆盖修改，体积小加载快。

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