更改角材料复选框的大小（mat-checkbox）答案

【问题标题】：Change the size of angular material checkbox (mat-checkbox)更改角材料复选框的大小（mat-checkbox）
【发布时间】：2019-12-31 13:14:45
【问题描述】：

我正在尝试增加材质复选框的大小。

transform 似乎增加了材质复选框的大小。但是，我不确定这是否是实现这一目标的正确方法？

CSS

 ::ng-deep .mat-checkbox .mat-checkbox-frame {
     transform: scale(2);
 }

 ::ng-deep .mat-checkbox-checked .mat-checkbox-background {
     transform: scale(2);
 }

【问题讨论】：

::ng-deep 已弃用 angular.io/guide/component-styles#deprecated-deep--and-ng-deep
谢谢那怎么做才是合理的呢？
这个问题仍然是一个非常公开的辩论，请参阅：github.com/angular/angular/issues/25160

标签： angular checkbox angular-material css-transforms

【解决方案1】：

正确答案的编辑队列已满。所以我在这里添加了缺少的类，以摆脱取消选中和检查动画的问题。

.mat-checkbox-frame,
.mat-checkbox-background,
.mat-checkbox-anim-unchecked-checked
.mat-checkbox-anim-checked-unchecked {
  transform: scale(2);
}

【讨论】：

【解决方案2】：

由于::ng-deep 已被弃用，您可以：

在您的@Component 中添加encapsulation: ViewEncapsulation.None 喜欢：

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

在你的 CSS 中简单地使用这个：

.mat-checkbox .mat-checkbox-frame {
     transform: scale(2);
}

.mat-checkbox-checked .mat-checkbox-background {
     transform: scale(2);
}

【讨论】：

那里似乎缺少了什么。取消选中该复选框将使“选中状态”在短时间内以常规大小显示。因此，取消选中时，您会在复选框内看到较小版本的“选中”图标。
@displayname 感谢您指出这一点。我在下面添加了缺少的类，以防有人需要解决方案。