PrimeNG 中的样式复选框

【问题标题】：Styling Checkbox in PrimeNGPrimeNG 中的样式复选框
【发布时间】：2020-06-10 19:08:54
【问题描述】：

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

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

我找到了labelStyleClassin 文档，它是标签的样式类。但我无法使用它。任何想法？

【问题讨论】：

标签： typescript primeng

【解决方案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

希望它会有所帮助。

【讨论】：

【解决方案2】：

使用下面的代码

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

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

【讨论】：