如何一次性全局修改Ng-select库的主色调？

要一次性替换Ng-select的默认主色调（#3f51b5），最靠谱的是利用它提供的SCSS变量或CSS变量进行全局覆盖，比零散写::ng-deep高效得多，也不会出现局部修改的问题。

方法一：用SCSS全局覆盖（推荐） #

Ng-select的默认主题是通过SCSS变量定义的，你可以在全局样式文件（比如styles.scss）里先定义自定义变量，再导入它的主题文件，就能直接覆盖所有关联样式：

// 先定义你的自定义主色调
$ng-select-primary-color: #你的目标颜色;

// 可选：调整hover、激活状态的关联颜色（按需修改）
$ng-select-primary-hover-color: darken($ng-select-primary-color, 10%);
$ng-select-primary-active-color: lighten($ng-select-primary-color, 10%);

// 导入Ng-select的默认主题文件
@import '~@ng-select/ng-select/themes/default.theme.scss';

这种方式会一次性覆盖所有需要主色调的区域，包括聚焦时的边框、下拉选项高亮、选中状态标识等，完全不用写零散的::ng-deep样式，也避免了!important带来的样式冲突。

方法二：用CSS变量覆盖 #

如果你的项目不用SCSS，也可以通过CSS根变量来修改：

:root {
  --ng-select-primary-color: #你的目标颜色;
  --ng-select-primary-hover-color: #自定义hover颜色;
  --ng-select-primary-active-color: #自定义active颜色;
}

注意事项 #

• 确保项目已经正确引入了Ng-select的样式文件，Angular项目一般在angular.json里配置或者直接在全局样式文件导入。
• 用SCSS的话，要保证项目安装了sass编译依赖（比如npm install sass --save-dev）。

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