PrimeNg p-inputnumber cannot be styled

Question

I am getting stuck trying to implement the PrimeNg Inputnumber element: https://www.primefaces.org/primeng/showcase/#/inputnumber

As per its documentation, there are a couple of attributes that can be used to style the input element, most notably styleClass and inputStyleClass. Unfortunately, neither of them work but rather they get completely ignored.

component.html:

<p-inputNumber 
  inputStyleClass="form-control-inputnumber" [(ngModel)]="subwinFld.orderAdd.doubleVal">
</p-inputNumber>

Global styles.css

.form-control-inputnumber {
  background:red;
  width: 100%;
}

I have used and successfully styled other primeNg elements before, using the exact same strategy, for example the p-calendar element. However, here it completely ignores the attribute.

What am I doing wrong?

Answer 1

class and styleClass should be used together. I solved it this way.

<p-inputNumber class="w-full" styleClass="w-full" formControlName="number" mode="decimal" inputId="number" [useGrouping]="false"> </p-inputNumber>