更改 angular material 复选框的大小 (mat-checkbox)

Question

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

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

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 已弃用，您可以：

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

Answer 2

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

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

更改 angular material 复选框的大小 (mat-checkbox)

Change the size of angular material checkbox (mat-checkbox)

checkbox

css-transforms

angular-material

angular