如何更改 primeNG 复选框大小答案

【问题标题】：How to change primeNG checkbox size如何更改 primeNG 复选框大小
【发布时间】：2022-02-03 03:40:33
【问题描述】：

简单的问题...我如何调整p-checkbox 的大小？没有primeng我做了类似的事情 <p-checkbox style="transform: scale(2.0)"></p-checkbox>

但是随着primeng我得到

Error: Cannot find a differ supporting object 'transform: scale(2.0)'
    at ...

那么如何让复选框变大呢？

【问题讨论】：

【解决方案1】：

您只需覆盖他们的css 即可。首先，更改复选框的大小。
您必须在下面设置两个类才能使复选框居中：

    body .ui-chkbox {
      width: 25px;
      height: 25px;
    }

    body .ui-chkbox .ui-chkbox-box {
      width: 25px;
      height: 25px;
    }

然后就可以修改勾号的大小了：

    body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
      font-size: 20px;
    }

如果需要，您可能还想更改标签的offset：

    body .ui-chkbox-label {
      margin: 0 0 0 0.8em;
    }

【讨论】：

【解决方案2】：

此解决方案可能不适合所有场景，但它适用于我的情况。

/*Increase p-checkbox size*/
:host ::ng-deep .ui-chkbox .ui-chkbox-box {
  width: 2em;
  height: 2em;
}

【讨论】：

【解决方案3】：

您可以在CSS中指定width和height，例如：

.p-checkbox .p-checkbox-box {
  width: 14px;
  height: 14px;
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
  font-size: 8px;
}

【讨论】：