css - 在组件级别更改 primeng CSS

Question

我知道类似的主题已被讨论过多次，但我找不到解决我面临的问题的方法。

我正在尝试在我的 Angular 应用中更改 PrimeNG 的样式。

在我的组件中，我更改了 PrimeNG 的 .ui-inputtext 类。

    body .ui-inputtext {
    font-size: 0.8vw;
    padding:0;
    background-color: #557db1 !important;
}

仅当我在我的组件类中设置 encapsulation:ViewEncapsulation.None 时才有效。

我也试过使用 :host >>>

 :host >>>   body .ui-inputtext {
    font-size: 0.8vw;
    padding:0;
    color:red;
    background-color: #557db1 !important;
}

在我的组件中使用 encapsulation:ViewEncapsulation.None 的问题在于它改变了整个应用程序中 PrimeNG 控件的样式。

我只想更改我已修改 CSS 类的组件的控件。

还有什么我需要做的，或者我在这里遗漏了什么吗？

此问题已在 GitHub 此处 ( https://github.com/primefaces/primeng/issues/1812 ) 上提出，但未得到进一步跟踪。

Answer 1

尝试在组件 css 文件中使用 :host/deep/。