Angular项目使用Nebular无法自定义CSS样式，求解决方案

Nebular组件默认样式会被Angular的组件样式隔离机制阻挡，想要自定义样式可以用以下几种方案：

1. 使用::ng-deep穿透样式（推荐） #

通过::ng-deep可以突破Angular的样式封装，直接作用到Nebular组件的内部DOM元素。搭配:host使用能确保样式只作用于当前组件内的Nebular组件，避免全局污染。

针对你需要修改的nb-select，在组件的SCSS文件中添加：

/* 自定义nb-select主容器样式 */
:host ::ng-deep .nb-select {
  display: inline-block;
  position: relative;
  width: 200px;
}

/* 如果需要修改下拉面板样式 */
:host ::ng-deep .nb-select-panel {
  width: 250px;
  /* 其他面板样式 */
}

2. 关闭当前组件的样式隔离 #

在组件的@Component装饰器中设置encapsulation: ViewEncapsulation.None，这样当前组件的样式会变成全局样式，能直接修改Nebular组件。但这种方式容易导致样式冲突，仅适合全局统一修改组件样式的场景：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent {}

之后在组件SCSS中直接写：

.nb-select {
  display: inline-block;
  position: relative;
  width: 200px;
}

3. 在全局样式文件中修改 #

项目根目录的styles.scss（或styles.css）是全局样式文件，直接在这里编写Nebular组件的样式规则，会对所有页面的对应组件生效：

/* 全局修改nb-select样式 */
.nb-select {
  display: inline-block;
  position: relative;
  width: 200px;
}

注意事项 #

• 如果样式优先级不够不生效，可以给选择器添加父元素类名提高优先级，或者临时使用!important（尽量避免，以免引发样式冲突）。
• ::ng-deep虽被Angular标记为deprecated，但目前没有合适的替代方案，仍是修改第三方组件样式的主流方式。

内容的提问来源于stack exchange，提问作者m.m.r