无法将任何样式应用于 PrimeNG 中的任何组件答案

【问题标题】：Can't apply any style to any component in PrimeNG无法将任何样式应用于 PrimeNG 中的任何组件
【发布时间】：2022-07-08 11:40:51
【问题描述】：

我在使用 PrimeNG 时遇到了相当麻烦的经历，因为我根本无法应用任何类型的 CSS，无论如何……这发生在卡片组件、dropwodnw、multislect 等。我最近的问题是不接受宽度 100% 的下拉菜单。我试过 class="etc"、styleClass="etc"、id="etc"。我见过这个 ng-deep 的家伙，但是，就像...每次我想做出最细微的改变时，我都需要称之为 ng-deep？？

另一个问题，我该怎么处理这个东西？

我试过用我能想到的各种可能的方式给这些人打电话……但什么都没有发生……也许我就是那么愚蠢哈哈……

我如何让这个人在这里接受宽度：15rem;比如……？

<span class="p-float-label dropdown">
         <p-dropdown 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>

【问题讨论】：

标签： angular primeng

【解决方案1】：

是的，要穿透 Angular 的视图封装，您需要在 CSS 选择器中包含 ::ng-deep。

并且您可能希望使用 :host 作为前缀，因此样式规则仅限于托管 PrimeNG 组件的组件，而不是全局应用于整个应用程序中该 PrimeNG 组件的所有实例（除非这是您真正想要的)。

因此，在组件的 CSS 中，您可以添加如下内容：

:host ::ng-deep .p-dropdown {
  width: 15rem;
}

如果您检查组件的样式，您会看到生成的 CSS 看起来像这样：

[_nghost-ddk-c55] .p-dropdown {
  width: 15rem;
}

Angular 使用 [_nghost-ddk-c55] 将样式封装到您的组件，然后将样式应用到组件内的所有 .p-dropdowns。

相比之下，如果您不包含 :host，您将拥有这条 CSS 规则，在整个应用中全局设置所有 .p-dropdowns 的样式，因为 ::ng-deep 实质上从选择器中剥离了任何视图封装：

.p-dropdown {
  width: 15rem;
}

Here's a StackBlitz 显示此工作（包括:host）。

使用 ::ng-deep 只是将您自己的自定义样式添加到 Angular 中的第三方组件的一部分。

替代方法是将这些样式放在angular.json 的styles 部分中定义的全局样式表中，这会将它们从任何视图封装中删除，因此不需要::ng-deep。

【讨论】：