如何修改angular-material2 mat-checkbox左图标的大小和颜色？

Question

angular material2 mat-checkbox

如何修改左图标大小和左图标状态颜色？

<mat-checkbox>Like Me.</mat-checkbox>

Answer 1

如果要更改颜色,请在CSS文件中使用这些颜色

::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: black;
}

::ng-deep .mat-checkbox-checked .mat-checkbox-background {
  background-color: black !important;
}

Answer 2

您可以使用此(.mat-checkbox-inner-container )CSS Selector来修改mat-checkbox

.mat-checkbox-inner-container {
  height: 50px!important;
  width: 50px!important;
}

请注意,您需要将样式修改放在styles.css根文件夹(/src/styles.css)中,而不是放在组件css中.

还要把!important(宽度:50px!important;)覆盖默认样式.

以下是mat-checkbox的默认样式

.mat-checkbox-inner-container {
    display: inline-block;
    height: 20px;
    line-height: 0;
    margin: auto;
    margin-right: 8px;
    order: 0;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
    width: 20px;
    flex-shrink: 0;
}

希望这可以帮助.

Answer 3

要更改样式，请使用类并在您的 scss 组件文件中定义它们。

当您发现这不起作用时，请在每个 scss 定义的类中的类名之前使用选择器 :host /deep/ 。

图标的大小由字体大小定义，而不是宽度/高度

希望我对你有帮助