时间戳

首页 > 解决方案 > Angular使用包装器组件进行primeng p-inputnumber无法设置样式

primeng - Angular使用包装器组件进行primeng p-inputnumber无法设置样式

问题描述

我是 Angular 的 PrimeNg 新手。我有一个简单的primeng p-inputnumber 组件，如下所示：

<p-inputNumber   
    [showButtons]="true"
    [placeholder]="placeholderText"
    incrementButtonIcon="fal fa-plus"
    decrementButtonIcon="fal fa-minus"
    [minFractionDigits]="_config?.integer ? 0 : 1"   
    [min]="_config?.minValue"
    [max]="_config?.maxValue"
    [(ngModel)]="value"
    (onBlur)="onBlur()"> 
</p-inputNumber>

并且已经为这个组件创建了一个包装器，即上述组件的包装器并在主页组件中使用它。现在我想将样式应用于此包装器组件，而后者又应将样式应用于primeng组件。现在它没有设置。

Homepagecomponent.html
---<app-number-input class="disabled">
------<p-inputNumber>

我在 homepagecomponent.scss 中设置了以下样式

:host ::ng-deep .disabled {
    background: red;
}

但是上面没有设置。谁能帮我实现我的预期？

谢谢

标签： primengangular11

解决方案

你的 CSS 中需要这样的东西

:host ::ng-deep {
    // you may want to specify your app element or something here to be more specific than just .disabled class
    .disabled {
        // tweak this list to whichever pieces of the p-inputnumber you want to have red background
        .p-inputnumber, 
        .p-inputnumber-stacked, 
        .p-inputnumber-horizontal, 
        .p-inputnumber-vertical, 
        .p-inputnumber-input, 
        .p-inputnumber-button, 
        .p-inputnumber-button-up, 
        .p-inputnumber-button-down, 
        .p-inputnumber-button-icon {
            background-color: red;
        }
    }
}

推荐阅读