我可以将 [ngClass] 条件 CSS 样式应用于材质组件（mat-checkbox）吗？答案

【问题标题】：Can I apply a [ngClass] conditional CSS style to a Material Component (mat-checkbox)?我可以将 [ngClass] 条件 CSS 样式应用于材质组件（mat-checkbox）吗？
【发布时间】：2018-08-09 16:59:15
【问题描述】：

我有一个树结构，其中每个节点都有一个 mat-checkbox 元素。 mat-checkbox 默认为蓝色，但如果单个节点满足某个属性，我希望复选框为绿色。如果节点类布尔元素评估为真，我将使用 [ngClass] 执行此操作。在尝试实现 ngClass 颜色更改条件之前，我已成功设置复选框颜色属性，如下所示：

.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:#0ede99 !important;
}

当我添加 [ngClass] 条件时，我不确定如何应用 CSS 类以及已经存在的 mat-checkbox 颜色的自定义。

<mat-checkbox [ngClass]="{'newTopic': tNode.isNew}"</mat-checkbox>

到目前为止我尝试的是这样做：

.newTopic {
     .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:#0ede99 !important;
    }
}

和

.newTopic, .mat-checkbox-checked.mat-accent... [rest of CSS code]

这可以吗？我在网上读到，可以通过 x.y { css code} 组合两个 css 类，其中 x 和 y 都是类，即使有几个类，这也适用吗？

【问题讨论】：

没关系，我真的想通了。如果将来有人偶然发现这一点，此链接：stackoverflow.com/questions/10036156/… 对澄清 CSS 语法有很大帮助，这有助于我意识到我正在尝试做的事情与我实际在做的事情。
当时的解决方案是什么？你能发布解决方案吗？
@brianthelion：你能发布解决方案吗？

标签： css angular angular-material ng-class

【解决方案1】：

这对我有用。它改变了下划线的颜色。仅示例代码..

CSS

`.my-class {
  ::ng-deep {
    .mat-form-field-ripple {
      background-color: #2ec200;
      border-bottom: 2.5px solid #2ec200;
      outline: none;
    }
    .mat-form-field-underline {
      background-color: #2ec200;
    }
  }`

HTML

<mat-form-field [ngClass]="{ 'my-class': my-conditions }">

【讨论】：