如何创建大纲垫复选框答案

【问题标题】：How to create an outline mat-checkbox如何创建大纲垫复选框
【发布时间】：2020-11-10 12:45:38
【问题描述】：

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

【问题讨论】：

标签： css angular checkbox sass angular-material

【解决方案1】：

为给定类（outline）创建全局样式并将该类添加到 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>

Example

【讨论】：