如何在styled-component中使用SCSS变量配置react-select的自定义样式

SCSS属于预处理语言，仅在项目编译阶段生效，编译后SCSS变量会被直接替换为对应的静态色值，不会保留到运行时的JS环境中。而你写的customStyles是JS运行时生效的对象，自然没法直接读取已经被编译销毁的SCSS变量。

方案1：使用CSS变量（最适合明暗主题切换场景） #

这是灵活性最高的方案，CSS变量是浏览器原生支持的运行时变量，可以和SCSS变量无缝衔接：

1. 在你的全局SCSS文件中，把需要用到的SCSS变量暴露为CSS变量：

// 你的原有SCSS变量
$light-control-bg: #ffffff;
$dark-control-bg: #0b1727;
$primary-color: #2c7be5;
$text-color: #d8e2ef;

// 亮主题默认变量
:root {
  --select-control-bg: #{$light-control-bg};
  --select-text-color: #{$text-color};
  --select-primary: #{$primary-color};
}

// 暗主题下覆盖变量
[data-theme="dark"] {
  --select-control-bg: #{$dark-control-bg};
}

2. 在customStyles对象中直接使用CSS变量即可：

const customStyles = {
  control: (base, state) => ({
    ...base,
    color: 'var(--select-text-color)',
    background: 'var(--select-control-bg)', // 直接调用CSS变量
    fontWeight: state.isSelected ? "bold" : "normal",
    borderRadius: state.isFocused ? "4px 4px 0 0" : 3,
    borderColor: state.isFocused ? "blue" : "var(--select-primary)",
    boxShadow: state.isFocused ? null : null,
    "&:hover": {
      borderColor: state.isFocused ? "var(--select-primary)" : "blue"
    }
  })
  // 其他属性同理替换即可
}

后续切换主题的时候只要修改根节点的theme属性，选择器样式会自动同步，不需要改JS逻辑。

方案2：导出SCSS变量到JS中使用 #

如果不需要动态切换主题，也可以直接把SCSS变量导出供JS读取：

1. 在SCSS变量文件中添加导出配置：

// variables.scss
$select-control-bg: #0b1727;
$select-primary: #2c7be5;

:export {
  selectControlBg: $select-control-bg;
  selectPrimary: $select-primary;
}

2. 在组件中引入SCSS变量文件使用：

import scssVars from './variables.scss'; // 引入变量文件

const customStyles = {
  control: (base, state) => ({
    ...base,
    background: scssVars.selectControlBg, // 直接使用导出的变量
    borderColor: state.isFocused ? "blue" : scssVars.selectPrimary
  })
}

注意这种方式导出的变量是编译时固定的静态值，无法响应主题切换。

方案3：通过className覆盖样式 #

也可以放弃使用styles属性，直接给react-select指定className，然后在SCSS中直接覆盖组件样式：

<Select className="custom-react-select" />

然后在SCSS中写对应样式即可直接使用SCSS变量：

.custom-react-select {
  .react-select__control {
    background: $dark-control-bg;
    color: $text-color;
    border-color: $primary-color;
  }
  .react-select__option {
    background: $dark-control-bg;
    &.react-select__option--is-focused {
      background: $primary-color;
    }
  }
  // 其他组件部分样式按需覆盖即可
}

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