更改角材质复选框的大小（mat-checkbox）

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