我理解类似的主题已被多次讨论,但我无法找到解决我面临的问题的方法。
我试图在我的角度应用程序中更改PrimeNG的样式。
在我的组件中,我改变了PrimezG的.ui-inputext
类。
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
的问题是它改变了整个应用程序中PrimeNGcontrols的样式。
我想仅对我已修改CSS类的组件进行控件更改。
还有其他我需要做的事情,或者我在这里错过了一些东西吗?
这个问题在GitHub上提出(https://github.com/primefaces/primeng/issues/1812),但没有进一步跟踪。
在组件css文件中尝试使用:host /deep/
。
将一个类添加到该输入字段并尝试使用该类更改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