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

【问题标题】：How to modify angular-material2 mat-checkbox left icon size and color?如何修改 angular-material2 mat-checkbox 左图标大小和颜色？
【发布时间】：2018-02-02 08:24:04
【问题描述】：

angular material2 mat-checkbox

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

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

【问题讨论】：

对于状态颜色，使用[color] 输入。有关尺寸，请参见下文。

标签： angular-material2

【解决方案1】：

你可以使用这个（.mat-checkbox-inner-container）CSS类来修改mat-checkbox

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

注意需要将样式修改放在styles.css根目录下（ /src/styles.css ) 而不是在组件 css 中。

也把 !important (width: 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;
}

希望这会有所帮助。

【讨论】：

你为什么要有在主css中使用它？
@Cammy 这样我们就可以覆盖复选框的样式。
@Cammy Research 为清楚起见“查看封装”

【解决方案2】：

如果你想改变颜色，那么在你的 CSS 文件中使用这些

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

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

【讨论】：

【解决方案3】：

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

希望这个 CSS 能解决您的问题

【讨论】：

你可以为 stroke 属性添加颜色，它对我有用！！

【解决方案4】：

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

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

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

希望能帮到你

【讨论】：

这可以工作，但请注意使用 :host /deep/ 已被弃用。有关更多信息，请阅读此链接。 angular.io/guide/component-styles#deprecated-deep--and-ng-deep

【解决方案5】：

在我的项目中，我们以这种方式将复选框和单选按钮的大小覆盖为 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%;
}

【讨论】：