我正在尝试更改 mat-checkbox 标签的字体大小。我似乎没有尝试任何工作,因为它始终被组件的默认样式覆盖:
<mat-checkbox [(ngModel)]="reportOption.AllSelected" *ngIf="reportOption.SelectAll" (change)="onSelectAllChange($event, reportOption)" style="margin-left:5px;" class="custom-checkbox">Select All</mat-checkbox>
我在全局样式表中所做的类似于下面的内容(从我的真实代码中提取,假设我有
<body class="my-app">...</body>
)并用 scss 编写。我覆盖了 Angular Material 中定义的类的样式,其中一些与我在此处演示的复选框相关:
.my-app {
.mat-pseudo-checkbox-checked {
background-color: #000;
}
.mat-checkbox-frame {
border-radius: 0 !important;
}
.mat-checkbox-checked,
.mat-checkbox-indeterminate {
.mat-checkbox-background {
background-color: #000;
border-radius: 0 !important;
}
}
.mat-mdc-checkbox {
--mdc-checkbox-selected-checkmark-color: #ffffff;
--mdc-checkbox-selected-icon-color: #000000;
--mdc-checkbox-selected-focus-icon-color: #000000;
--mdc-checkbox-selected-hover-icon-color: #000000;
--mdc-checkbox-selected-pressed-icon-color: #000000;
--mdc-checkbox-state-layer-size: 0;
--mdc-checkbox-unselected-focus-state-layer-opacity: 0;
&.mat-mdc-checkbox-disabled {
.mdc-checkbox {
.mdc-checkbox__background {
--mdc-checkbox-disabled-selected-icon-color: transparent;
.mdc-checkbox__checkmark {
@include color(inherit);
}
}
}
}
.mdc-checkbox {
.mdc-checkbox__background {
@include square(16px);
}
}
.mdc-form-field {
--mdc-typography-body2-letter-spacing: normal;
}
}
}