PrimeNG组件无法应用自定义CSS样式 下拉框宽度设置不生效如何解决

是否每次样式微调都必须使用::ng-deep？ #

不需要。::ng-deep只是Angular样式穿透的可选方案之一，你可以根据样式的作用范围选择对应实现方式：

• 全局通用样式调整：直接将PrimeNG自定义样式写入项目全局样式文件（如src/styles.scss/src/styles.css），全局样式不受Angular视图封装规则限制，无需任何穿透写法，适合统一修改全站卡片、下拉框、多选组件的通用样式规则
• 单组件级样式调整：给当前组件装饰器添加encapsulation: ViewEncapsulation.None配置，关闭当前组件的样式隔离，注意编写样式时要带上当前组件的专属父级选择器，避免样式泄露污染全局
• 小范围局部样式微调：带:host前缀的::ng-deep是最轻量的实现方案，:host前缀会将样式作用域严格限制在当前组件内部，不会产生全局样式污染

目标下拉框设置width: 15rem的实现方法 #

你之前通过class、styleClass、id绑定样式不生效，根本原因是Angular默认开启的视图仿真封装会给组件内的普通样式添加专属属性标记，无法直接命中PrimeNG组件渲染出的内部DOM元素，且PrimeNG自带样式的选择器权重通常高于普通自定义类。
任选以下一种方案即可实现需求：

1. 零CSS快速实现：直接给p-dropdown组件传入[style]输入属性，内联样式优先级最高，不会被默认样式覆盖，修改后的模板代码如下：

<span class="p-float-label dropdown">
  <p-dropdown 
    [style]="{'width':'15rem'}"
    styleClass="dd-style" 
    id="formacaoAcademica" 
    [autoDisplayFirst]="false" 
    name="formacaoAcademica"  
    [options]="academicFormationOptions" 
    formControlName="formacaoAcademica">
  </p-dropdown>
  <label for="formacaoAcademica">Selecione sua formação acadêmica</label>
</span>

如果需要设置宽度100%，直接将属性值中的15rem替换为100%即可。

2. 局部CSS穿透实现：在当前组件的样式文件中添加如下代码，通过:host ::ng-deep限定样式作用域，同时提高选择器权重覆盖PrimeNG默认样式：

:host ::ng-deep .p-float-label.dropdown .dd-style.p-dropdown {
  width: 15rem;
}

如果添加后仍未生效，打开浏览器开发者工具选中对应下拉框元素，查看样式覆盖规则，适当增加选择器层级提高权重即可。

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