在组件级别更改primeng CSS

问题描述 投票:2回答:2

我理解类似的主题已被多次讨论,但我无法找到解决我面临的问题的方法。

我试图在我的角度应用程序中更改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 angular primeng
2个回答
1
投票

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


1
投票

将一个类添加到该输入字段并尝试使用该类更改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

© www.soinside.com 2019 - 2024. All rights reserved.