定位组件以设置样式时出现问题

Question

我有一个使用 mat-checkbox 的自定义组件。我只想更改该组件的 bqckground，但运气不佳。

我的模板代码如下

<form novalidate [formGroup]="form">
    <mat-form-field>
    <mat-label>{{labelText}}</mat-label>
    <mat-select class="select" #select [multiple]="multiselect" [formControl]="selectField" >
      <div class="select-all">
          <mat-checkbox *ngIf="multiselect" [(ngModel)]="allSelected"
                         class="mat-check-all"
                          [ngModelOptions]="{standalone: true}"
                          [indeterminate]="isIndeterminate()"
                          [checked]="isChecked()" 
                          (click)="$event.stopPropagation()"
                          (change)="toggleAllSelection($event)">{{text}}</mat-checkbox>
      </div>
      <mat-option *ngFor="let item of data" [value]="item[idField]">
        {{item[fieldName]}}
      </mat-option>
    </mat-select>
    </mat-form-field>
    </form>

我尝试了以下但没有成功

.mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }
.mat-check-all .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }
.select-all .mat-check-all .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }
.select .select-all .mat-check-all .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }
::ng-deep .select .select-all .mat-check-all .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }

以上都没有任何区别。当我使用

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }

它改变了我的复选框的颜色，也改变了表单上任何其他复选框的颜色。那么我怎样才能限制对我的组件中的复选框的更改？

Answer 1

要更改标签的背景，您可以使用此代码

    .mat-checkbox-label{ background-color: rgb(49, 201, 11);}

并更改复选标记背景：

.mat-checkbox-checked.mat-accent .mat-checkbox-background{ background-color: rgb(49, 201, 11);}

并且您必须将此类添加到主样式文件中，该文件在 angular.json 文件中的“样式”键中定义，看起来像这样：

"styles": [
          "src/styles.scss"
        ],

Answer 2

您需要将 class 添加到您正在使用的表单中，或者用 div 和 class 将其包装起来，然后使用 ::ng-deep 像这样

<form novalidate [formGroup]="form" class="my-custom-form">
    <mat-form-field>
    <mat-label>{{labelText}}</mat-label>
    <mat-select class="select" #select [multiple]="multiselect" [formControl]="selectField" >
      <div class="select-all">
          <mat-checkbox *ngIf="multiselect" [(ngModel)]="allSelected"
                         class="mat-check-all"
                          [ngModelOptions]="{standalone: true}"
                          [indeterminate]="isIndeterminate()"
                          [checked]="isChecked()" 
                          (click)="$event.stopPropagation()"
                          (change)="toggleAllSelection($event)">{{text}}</mat-checkbox>
      </div>
      <mat-option *ngFor="let item of data" [value]="item[idField]">
        {{item[fieldName]}}
      </mat-option>
    </mat-select>
    </mat-form-field>
    </form>

.my-custom-form ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }

这会将 ng-deep 的效果仅限于此表单

Answer 3

ng-deep 已弃用，并且从来没有必要。 Angular 使用视图封装，因此您在组件的 css 文件中放入的任何 css 默认情况下不会影响其他组件，例如 mat-checkbox。

你可以把 css 放在像 styles.css 这样的全局文件中并使用特定的选择器，我建议在组件名称前加上，或者简单地添加一个 id:

在 styles.css 或另一个全局 css 文件中

my-component-tag .select .select-all .mat-check-all .mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: rgb(49, 201, 11);
  }

如果需要，您可以创建一个新的全局样式文件并将其添加到 angular.json 中的 styles 数组中。或者，如果您使用的是 scss.

，则只需将其导入 styles.scss

或

您可以禁用组件的视图封装，这将导致该组件的 css 文件中的所有 css 变为全局：

在component.ts文件中

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})
export class MyComponent {}

Answer 4

根据您上面的模板代码，您只需通过

为自定义组件设置颜色即可

::ng-deep
  .select-all
  .mat-checkbox-checked.mat-accent
  .mat-checkbox-background {
  background-color: rgb(224, 198, 28) !important;
}

您可以在分叉的 StackBlitz 中验证 Sample

定位组件以设置样式时出现问题

Problem targeting a component to set style

css

angular-material

angular