Question

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

我正在尝试在我的角度应用程序中更改PrimeNG的样式。

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

    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的问题在于，它会更改整个应用程序中PrimePrime控件的样式。

我只想对已修改CSS类的该组件进行控件更改。

还有什么我需要做的，还是我在这里想念什么？

此问题在GitHub（https://github.com/primefaces/primeng/issues/1812）上提出，但没有进一步跟踪。

Answer 1

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

Answer 2

在该输入字段中添加一个类，并尝试使用该类而不是正文来更改css，然后在component.ts文件中添加encapsulation: Viewencaptulation.None。不会更改其他组件CSS。

以下是您可以尝试使用的示例代码：

<input type="text" class="field_input" pInputText placeholder="Username">

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

Stackblitz链接：

https://stackblitz.com/edit/angular-romzcu?embed=1&file=src/app/app.component.ts

在组件级别更改primeng CSS

2 个答案: