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

【问题标题】：Angular using wrapper component for primeng p-inputnumber not able to styleAngular使用包装器组件进行primeng p-inputnumber无法设置样式
【发布时间】：2021-07-22 01:33:46
【问题描述】：

我是 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;
}

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

谢谢

【问题讨论】：

标签： primeng angular11

【解决方案1】：

你的 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;
        }
    }
}

【讨论】：