如何覆盖primeng组件的样式? [英] How do I override the style of primeng components?

问题描述

我想根据组件级别而不是整个应用程序来彻底改变primeng组件的样式.我必须更改主 theme.css 文件中的样式或内联样式，但似乎内联有时无法按预期工作.例如，我必须使用

I want to overright the style of primeng components as per component level not for whole app. Either I have to change the style in main theme.css file or inline style, but seems inline not works sometimes as expected. As example, I have to use

<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>

而且我必须根据文档更改 ui-dropdown-item 类名的样式.

And I have to change the style of class ui-dropdown-item class name as per documentation.

我需要具有两种不同样式的相同组件，这样做的正确方法是什么?

I need same component with two diff style what is the correct approach for doing this?

推荐答案

由于 >>> 已被弃用，因此必须使用 ::ng-deep 代替.使用 material2 v6 和 primeng v5.2.*

Since >>> is deprecated have to use ::ng-deep instead. With material2 v6 and primeng v5.2.*

:host {
    ::ng-deep .prime-slider-override {
        background-color: #26A3D1;
        background-image:none;
        border:none;
        color:white;

        .ui-slider-range {
            background: red;
        }
    }    
}

<p-slider [(ngModel)]="rangeValues"
              styleClass="prime-slider-override"></p-slider>

这篇关于如何覆盖primeng组件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！