更改角形材质复选框的大小（垫复选框）

Question

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

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

CSS

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

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

Answer 1

不推荐使用::ng-deep，您可以：

在encapsulation: ViewEncapsulation.None中添加@Component，例如：

@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);
}

Answer 2

正确答案的编辑队列已满。因此，我在此处添加了缺少的类，以消除取消检查动画的问题。

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