如何修改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类来修改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 /在类名之前。

图标的大小由font-size而不是width / height定义

希望我能帮助你

Answer 4

在我的项目中，我们以这种方式将复选框和单选按钮的大小覆盖到16px：

body .mat-checkbox-inner-container, body .mat-radio-container, body .mat-radio-outer-circle, body .mat-radio-inner-circle {
  height: 16px;
  width: 16px;
}

body .mat-checkbox-ripple, body .mat-radio-ripple {
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

Answer 5

    ::ng-deep .mat-checkbox-checkmark-path {
     stroke: #000 !important;
   }

希望这个CSS会解决你的问题