css - 如何创建大纲垫复选框

Question

如何反转 mat-checkbox 的颜色，使边框和复选标记着色，其余部分透明？

标签： cssangularcheckboxsassangular-material

Answer 1

为给定类（大纲）创建全局样式并将该类添加到 mat-checkbox。

src/style.scss

@import '~@angular/material/theming';
@include mat-core();
$app-primary: mat-palette($mat-indigo);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);
$app-warn: mat-palette($mat-red);
$theme: mat-light-theme($app-primary, $app-accent);
@include angular-material-theme($theme);
$primary: mat-color($app-primary);
$accent: mat-color($app-accent);
$warn: mat-color($app-warn);

@mixin checkbox-color($color) {
  .mat-checkbox-frame {
      border-color: $color;
    }
    &.mat-checkbox-checked .mat-checkbox-checkmark-path {
      stroke: $color !important;
    }
}
mat-checkbox.mat-checkbox.outline {
  .mat-checkbox-background {
    background-color: transparent;
  }
  &.mat-primary {
    @include checkbox-color($primary);
  }
  &.mat-warn {
    @include checkbox-color($warn)
  }
  &.mat-accent {
     @include checkbox-color($accent)
  }
}

<mat-checkbox class="outline" color="primary"></mat-checkbox>

例子