当ng::deep已弃用时，如何修改PrimeNG的p-button、p-inputSwitch样式？

在Angular弃用::ng-deep后，可通过以下几种方案安全修改PrimeNG的p-button和p-inputSwitch组件样式：

1. 宿主选择器+后代选择器（保留视图封装） #

在组件的样式文件中，用:host限定样式仅作用于当前组件内的PrimeNG元素，直接匹配组件内置类：

修改p-button样式 #

/* 基础样式 */
:host .p-button {
  background-color: #2563eb;
  border-radius: 8px;
  border: none;
}

/* hover状态 */
:host .p-button:hover {
  background-color: #1d4ed8;
}

修改p-inputSwitch样式 #

/* 开启状态的滑块背景 */
:host .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
  background-color: #10b981;
}

/* 调整滑块尺寸 */
:host .p-inputswitch-slider {
  width: 40px;
  height: 20px;
}

2. 关闭视图封装（需注意作用域） #

在组件元数据中关闭ViewEncapsulation，直接编写样式，但建议通过外层容器类限定作用域避免全局污染：

组件配置（.ts文件） #

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

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

模板与样式 #

模板中添加外层容器：

<div class="custom-component-container">
  <p-button label="自定义按钮"></p-button>
  <p-inputSwitch></p-inputSwitch>
</div>

样式文件中限定作用域：

.custom-component-container .p-button {
  background-color: #f59e0b;
  padding: 0.5rem 1.5rem;
}

.custom-component-container .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
  background-color: #ef4444;
}

3. 使用PrimeNG内置CSS变量（推荐） #

PrimeNG多数组件支持通过CSS自定义属性修改样式，无需穿透封装，且兼容性更好：

修改p-button样式 #

:host .p-button {
  --p-button-bg: #8b5cf6;
  --p-button-hover-bg: #7c3aed;
  --p-button-border-radius: 6px;
  --p-button-text-color: #ffffff;
}

修改p-inputSwitch样式 #

:host .p-inputswitch {
  --p-inputswitch-checked-bg: #06b6d4;
  --p-inputswitch-slider-width: 42px;
  --p-inputswitch-slider-height: 22px;
  --p-inputswitch-unchecked-bg: #d1d5db;
}

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