如何合规自定义PrimeNg组件样式？

问题背景 #

使用PrimeNg库时，常规CSS类无法定制组件样式，现有两种方案均不理想：::ng-deep不符合规范，内联样式在客户端项目中适用性差。当前使用的代码示例：

:host ::ng-deep .p-sidebar {
  width: 285px;
  background-color: #fafafa;
  height: 100vh;
  ::-webkit-scrollbar {
    display: none;
  }
}

合规替代方案 #

1. 利用PrimeNg内置CSS变量（推荐） #

PrimeNg绝大多数组件都提供了可覆盖的CSS变量，直接在组件内或全局样式中修改这些变量即可完成定制，无需打破视图封装。

以你的Sidebar为例，可在组件的:host选择器中设置对应变量：

:host {
  --p-sidebar-width: 285px;
  --p-sidebar-bg: #fafafa;
  /* 隐藏滚动条可通过滚动条相关变量设置 */
  --p-scrollbar-width: 0;
}

如果组件没有对应变量，也可以针对滚动条单独在:host下结合组件类设置：

:host .p-sidebar::-webkit-scrollbar {
  display: none;
}

2. 限定范围的全局样式 #

将定制样式写入项目全局样式文件（如styles.css），同时给目标PrimeNg组件添加自定义类名，避免样式污染其他组件：

模板中给Sidebar添加自定义类：

<p-sidebar class="custom-sidebar"></p-sidebar>

全局样式文件中定义类：

.custom-sidebar {
  width: 285px;
  background-color: #fafafa;
  height: 100vh;
}

.custom-sidebar::-webkit-scrollbar {
  display: none;
}

3. 禁用组件视图封装（谨慎使用） #

在组件装饰器中设置ViewEncapsulation.None，让组件内的CSS变为全局样式，之后即可用常规类选择器定制样式。但需注意给目标组件加自定义类，避免影响全局同类型组件：

组件代码：

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

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

组件CSS中：

.custom-sidebar {
  width: 285px;
  background-color: #fafafa;
  height: 100vh;
}

.custom-sidebar::-webkit-scrollbar {
  display: none;
}

4. 使用PrimeNg StyleClass指令 #

借助PrimeNg的pStyleClass指令动态绑定自定义类，再搭配全局或组件内的样式定义：

模板中：

<p-sidebar [pStyleClass]="{'custom-sidebar': true}"></p-sidebar>

后续样式定义和前面的全局/组件样式方法一致。

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