要更改Angular Material 2中根后代复选框的颜色,你可以使用自定义CSS来覆盖默认样式。以下是一个示例解决方案:
创建一个名为custom-checkbox-theme.scss
的新样式文件。
在文件中添加以下代码:
@import '~@angular/material/theming';
@include mat-core();
// 创建自定义主题
$custom-primary: mat-palette($mat-indigo);
$custom-accent: mat-palette($mat-pink, A200, A100, A400);
$custom-warn: mat-palette($mat-red);
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);
// 应用自定义主题到复选框
.mat-checkbox {
&.mat-accent .mat-checkbox-frame {
border-color: mat-color($custom-accent);
}
&.mat-accent .mat-checkbox-background {
background-color: mat-color($custom-accent);
}
&.mat-accent .mat-checkbox-checkmark-path {
stroke: mat-color($custom-accent);
}
}
import './custom-checkbox-theme.scss';
mat-checkbox
的复选框都将使用你定义的自定义颜色。请注意,你可以根据需要调整$custom-primary
,$custom-accent
和$custom-warn
的值来更改主题颜色。