代码之家 › 专栏 › 技术社区 › Dheeraj Kumar

在组件级别更改启动css

primeng angular css

Dheeraj Kumar · 技术社区 · 6 年前

我知道类似的话题已经讨论过很多次了,但是我找不到解决我所面临问题的方法。

我正在尝试改变我的角度应用程序的素描风格。

.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;
}

恩卡psulation:ViewEncapsulation.None 在我的组件中,它改变了整个应用程序中PrimeNGcontrols的样式。

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

这个问题是在GitHub上提出的( https://github.com/primefaces/primeng/issues/1812 )但没有进一步追踪。

2 回复 | 直到 5 年前

Elanor-L 6 年前

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

Zarna Borda 6 年前

向该输入字段添加一个类,并尝试使用该类而不是使用body和Add来更改css encapsulation: Viewencaptulation.None

下面是您可以这样尝试的示例代码:

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

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

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

推荐文章

Michael Albrecht · 无法在第二个角度模块中使用素数

2 年前

Dante Orlando · PrimeNG TurboTable:dataKey需要是列吗?

6 年前

Hamza Haddad · 使用PrimeNG autocomplete组件显示焦点建议

6 年前

Aw3same · 布尔值不变

6 年前

Ayushi Tomar · 使用primeng和angular 5时,无法对“dd/mmm/yyyy”中的turbo table列进行排序

6 年前

Neamesis · 角度4+启动:TreeNode是否可以包含下拉列表?

6 年前

Vignesh · 行分组时,p表中显示的对象数组不会按原始顺序显示

6 年前

Ramesh Rajendran · ReferenceError:单元测试时未定义Quill

7 年前

sashafedsdev · PrimeNg multiselect,默认情况下选择所有项目

7 年前

RobinLu · Angular 4 Priming onChange不工作

7 年前