Могу ли я изменить цвет флажка «Угловой материал» на какой-нибудь другой цвет и как?

Question

Я пытаюсь это сделать, но похоже, что можно изменить его только на основной или предупредить.

Answer 1

Вы можете использовать этот код для изменения поля и значка галочки:

/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"

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

Используйте это на вашем CSS.

::ng-deep .mat-primary .mat-pseudo-checkbox-checked {
    background: red;
}

Вы должны использовать :: ng-deep, иначе это не будет работать.

На вашем Html используйте вот так:

<mat-form-field>
  <mat-select placeholder="values" [formControl]="val" multiple>
    <mat-option *ngFor="let v of values" [value]="v">{{v.text}}</mat-option>
  </mat-select>
</mat-form-field>

Answer 4

Правильный способ управления цветами элементов углового материала - использовать разные палитры, но функциональность ограничена.Если вам нужен больший контроль, вы можете добавить пользовательский CSS, и в большинстве случаев вам нужно будет использовать ::ng-deep, чтобы применить ваши стили, например:

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

Вот это DEMO , где я поменял цвет рамки и фона при его проверке.Вы можете использовать этот способ для реализации любого стиля.

Если вы не знакомы с ::ng-deep и не понимаете, когда вам это нужно, вы можете просмотреть ЭТОТ короткий ответ.

ОБНОВЛЕНИЕ 1

Есть еще один способ через отключение инкапсуляции (благодаря @Ventura).Он имеет право на существование, но будьте осторожны, если вы решили отключить инкапсуляцию, не путайте с таблицами стилей, поскольку он ведет себя не так, как вы ожидаете от стандартной логики в отношении CSS.

Для получения дополнительной информации: https://coryrylan.com/blog/css-encapsulation-with-angular-components

SO ответ: https://stackoverflow.com/a/54981478/6053654

ОБНОВЛЕНИЕ 2

Метод устарел, дополнительную информацию см. Здесь: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep.