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 /在类名之前。

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

定义

希望我帮助你

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可以解决您的问题

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

5 个答案: