Angular - изменение цвета материала

Ответ 1

Один из стандартных способов сделать это - использовать /deep/selector

mat-checkbox {
    color: rgb(0,178,0);
    /deep/ .mat-checkbox-background {
        background-color: rgb(0,178,0);
    }

    /deep/ &.mat-checkbox-focused{
        .mat-ink-ripple{
            background-color: rgba(0, 178, 0, .26);
        }
    }
}

Это позволит вам переопределить стили в компонентах, где включен Shadow Dom.

Ответ 2

Вам не нужно добавлять css, если вы используете тему, просто добавьте цвет атрибута в <mat-chechkbox>

<mat-checkbox color="primary">Primary</mat-checkbox>

Цвет можно изменить с помощью свойства цвета. По умолчанию флажки используют цвет акцента темы. Это может быть изменен на "первичный" или "предупредить" Checkbox | Угловой материал

Ответ 3

Это должно позаботиться о цвете флажка по умолчанию

md-checkbox .md-icon {
    background: green;
}
md-checkbox.md-default-theme.md-checked .md-icon {
    background: green;
}

подробнее здесь Angular Документация по материалам

Ответ 4

С бета-2 из Angular материала атрибут color должен работать.

Перед бета-тестированием возникли некоторые проблемы.

См. commit, который исправил эту проблему.

Ответ 5

Следующее будет держать рамку серым, если не отмечено, но изменено на пользовательский цвет, если отмечено:

отношение-СКС-file.scss

mat-checkbox {
  &.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background {
   background: rgb(0,178,0);
  }
}

Ответ 6

это решение хорошо работает для меня

/deep/.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #3490d3;
}

Ответ 7

Так как глубокий не рекомендуется. На мой взгляд, правильный способ сделать это - использовать encapsulation: ViewEncapsulation.None.

например:

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None,
})

Тогда вам просто нужно изменить класс

.mat-checkbox-background {
  background-color: green;
}

Вам просто нужно быть осторожным, чтобы иметь дело с глобальными вещами CSS. В SASS вложенные классы должны обрабатывать это правильно.

Вы можете получить более подробную информацию здесь: fooobar.com/questions/15186427/...

Ответ 8

Цвет по умолчанию зависит от темы, которую вы @import.

Но угловой материал также предоставляет способ настроить тему или настроить компоненты, такие как изменение цвета флажка.

Шаги сделать это следующим образом:

1.) Импортируйте файл _theming.scss

 @import "../node_modules/@angular/material/theming";

2.) Укажите цвет акцента, т.е. цвет флажка, который вы хотите применить, как показано ниже: -

  // customising of the mat-checkbox accordiing Theme. i am using pink indigo theme 
     bydefault so here I am changing the checkbox color from pink to grey.


    $candy-app-primary: mat-palette($mat-indigo);

    // here I am specify the grey instead of Pink.

    $candy-app-accent: mat-palette($mat-grey, 600, 500, 900);
    $candy-app-warn: mat-palette($mat-red);

    // Create the theme object (a Sass map containing all of the palettes).
    $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

    // here I am only calling checkbox mixin because i only want to change the checkbox color     
    @include mat-checkbox-theme($candy-app-theme);

Надеюсь, это поможет.

Ответ 9

Для angular материала 7 работает для цвета контура и внутри закрашен цветом

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
    opacity: 0.03 !important;
    background-color: #005691!important;
  }

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #005691;
  }