PrimeNG 中的样式复选框

Question

我正在尝试更改以下 PrimeNG 复选框标签样式（即字体大小）：

<div class="ui-g-7">
    <p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities" inputId="la">
    </p-checkbox>
</div>

我在文档中找到了 labelStyleClass 标签的样式 class。但我无法使用它。任何的想法？

Answer 1

您可以在 .css 或 .scss 文件

中简单地实现这一点

:host::ng-deep {
    .ui-chkbox-label {
        font-size: 20px;
        font-weight: bold;
    }
}

注意：如果你没有在你的组件中启用viewEncapsulation。然后使用:host::ng-deep。强烈推荐。

输出：

另外为了您的方便创建了功能示例：

https://stackblitz.com/edit/angular-tdkc3d

希望对您有所帮助。

Answer 2

使用下面的代码

:host::ng-deep ui-chkbox-label {
   color: blue;
}

您可以将 :host::ng-deep 与图像中提到的任何类一起使用

PrimeNG 中的样式复选框

Styling Checkbox in PrimeNG

typescript

primeng