Я использую флажок angular -material2. В настоящее время цвет флажка по умолчанию идет как фиолетовый цвет.
Похоже, они изменили цвет по умолчанию флажка с "первичным" на акцент.
Есть ли способ получить "первичный" (зеленый) цвет вместо фиолетового без переопределения css.
Я пробовал давать color = "primary", но это не сработало.
Код: <md-checkbox></md-checkbox>
Операция импорта:
import {MdCheckbox} from '@angular2-material/checkbox';
Один из стандартных способов сделать это - использовать /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.
Вам не нужно добавлять css, если вы используете тему, просто добавьте цвет атрибута в <mat-chechkbox>
<mat-checkbox color="primary">Primary</mat-checkbox>
Цвет можно изменить с помощью свойства цвета. По умолчанию флажки используют цвет акцента темы. Это может быть изменен на "первичный" или "предупредить" Checkbox | Угловой материал
Это должно позаботиться о цвете флажка по умолчанию
md-checkbox .md-icon {
background: green;
}
md-checkbox.md-default-theme.md-checked .md-icon {
background: green;
}
подробнее здесь Angular Документация по материалам
С бета-2 из Angular материала атрибут color должен работать.
Перед бета-тестированием возникли некоторые проблемы.
См. commit, который исправил эту проблему.
Следующее будет держать рамку серым, если не отмечено, но изменено на пользовательский цвет, если отмечено:
отношение-СКС-file.scss
mat-checkbox {
&.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background {
background: rgb(0,178,0);
}
}
это решение хорошо работает для меня
/deep/.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #3490d3;
} Так как глубокий не рекомендуется. На мой взгляд, правильный способ сделать это - использовать encapsulation: ViewEncapsulation.None.
например:
@Component({
selector: '...',
templateUrl: '...',
styleUrls: ['...'],
encapsulation: ViewEncapsulation.None,
})
Тогда вам просто нужно изменить класс
.mat-checkbox-background {
background-color: green;
}
Вам просто нужно быть осторожным, чтобы иметь дело с глобальными вещами CSS. В SASS вложенные классы должны обрабатывать это правильно.
Вы можете получить более подробную информацию здесь: fooobar.com/questions/15186427/...
Цвет по умолчанию зависит от темы, которую вы @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);
Надеюсь, это поможет.
Для 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;
}