通过全局样式更改 PrimeNG 复选框的默认选中图标

Question

我正在将 Angular 从版本 15 更新到 17。因此我还需要更新 primeNG。

我无法更改复选框的默认选中图标。

根据 icon 模板或新属性 checkboxIcon 更改图标对我来说不是一个选项，因为我需要在使用的所有地方更改我的 html 模板

<p-checkbox>

- 对我来说似乎不太优雅。

之前，我可以通过 content 属性和伪选择器

::before

更改一个全局 CSS 文件中的图标。类似的东西

.p-checkbox-box.p-highlight .p-checkbox-icon::before {
  content: '\e90b';
  font-family: 'primeicons' !important;
  font-size: 18px;
}

所以我想这样改变图标。

在

此处查找最小的 Angular/PrimeNG 设置。

Answer 1

您可以使用以下CSS

为图标添加白色以获得良好的对比度

全局样式.scss

.p-checkbox-box.p-highlight .p-element.p-icon-wrapper::before {
  content: '\e90b';
  font-family: 'primeicons' !important;
  font-size: 18px;
  color: white;
}

.p-checkbox-box.p-highlight .p-element.p-icon-wrapper svg {
  display: none;
}

Stackblitz 演示

如果你想放入component.ts，你需要使用::ng-deep

::ng-deep .p-checkbox-box.p-highlight .p-element.p-icon-wrapper::before {
  content: '\e90b';
  font-family: 'primeicons' !important;
  font-size: 18px;
  color: white;
}

::ng-deep .p-checkbox-box.p-highlight .p-element.p-icon-wrapper svg {
  display: none;
}