Question

我有一个树形结构，其中每个节点都有一个mat-checkbox元素。 mat-checkbox默认为蓝色，但是如果该单个节点满足特定属性，则我希望复选框为绿色。如果节点类的布尔元素的值为true，则使用[ngClass]。在尝试实现ngClass颜色更改条件之前，我已经成功设置了如下复选框的color属性：

.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都是两个类，即使有几个类，在这里也适用吗？

Answer 1

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

CSS

exports.compReqUpdated = functions.firestore
  .document('/compRequests/{id}')
  .onUpdate((change, contex) => {
    const newData = change.after.data();
    //const oldData = change.before.data();
    const dbConst = admin.firestore();
    const reqStatus: string = newData.requestStatus;
    const compId: string = newData.compID;
    const reqActive: boolean = newData.requestActive;


    if (reqStatus == "CANCELED" && reqActive) {

      const query = dbConst.collection('compRequests').where('compID', '==', compId);

      const batch = dbConst.batch();

      return query.get().then(querySnapshot => {
        const docs = querySnapshot.docs;
        for (const doc of docs) {
          console.log(`Document found at path: ${doc.ref.path}`);
          console.log(doc.id);
          const docRef = dbConst.collection('compID').doc(doc.id);

          batch.update(docRef, { requestStatus: 'CANCELED', requestActive: false });

        };

        return batch.commit()
      }).catch(result => { console.log(result) });
    } else {
      return false;
    }
  });

HTML

`.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;
    }
  }`

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

1 个答案: