我可以使用一些自定义颜色更改角度材质复选框的颜色以及如何？

Question

我正在尝试这样做,但看起来只能将其更改为主要或警告.

Answer 1

控制Angular Material元素颜色的正确方法是使用不同的托盘,但功能有限.如果您想要更多控件,可以添加自定义CSS,在大多数情况下,您需要使用::ng-deep强制样式来应用,例如:

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

这是一个DEMO,我检查时改变了边框和背景的颜色.您可以按照这种方式实现您想要的任何样式.

如果你不熟悉::ng-deep并且不太懂,当你需要它时,你可以通过这个简短的答案来看.

Answer 2

你可以用这个:

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate, .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate {
    background-color: red !important; /* Red background for example */
}

Answer 3

您可以使用此代码更改其框和复选图标：

/deep/ .mat-checkbox.mat-accent {
  .mat-checkbox-frame {
    border: 1px solid dodger-blue;
  }

  &.mat-checkbox-checked .mat-checkbox-background {
    background-color: white;
    border: 1px solid dodger-blue;
  }

  .mat-checkbox-checkmark-path {
    stroke: dodger-blue !important;
  }
}

角度材质版本：“7.0.0”