Флажок пользовательского интерфейса материала css имеет приоритет над компонентами в angular

Я пытаюсь переопределить флажок материала пользовательского интерфейса css в моем домашнем компоненте, и он работает нормально. Но есть побочные эффекты, такие как css флажка в компоненте формы, который переопределяется. Может ли кто-нибудь предложить решение для этого.

HTML используется

 <mat-checkbox formControlName="home">
  Home
</mat-checkbox>

css, используемый для перебора, по умолчанию - серый цвет

::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: blue !important;
}

Флажок компонента формы - для этого компонента также он заменяет цвет границы на синий без написания CSS

<mat-checkbox formControlName="form">
  Form
</mat-checkbox>

Я считаю, что это происходит из-за использования :: ng-deep

Я даже попробовал ViewEncapsulation также в компоненте Home. Он по-прежнему переопределяет CSS в компоненте формы и другие CSS в обоих компонентах.

Любая помощь по этому поводу будет оценена.


angular html css angular-material
person Kalyan    schedule 13.08.2020    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Чтобы применить стиль только внутри определенного дочернего компонента, добавьте селектор :host в следующий код в CSS этого компонента:

:host ::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: blue !important;
}

Это распространит действие этого правила на все флажки, которые есть в этом текущем компоненте и всех его дочерних элементах, и будет работать довольно хорошо в случае маршрутизируемых компонентов.

Но если вы хотите применить это правило css только для шаблона домашней страницы, вы можете использовать:

home.component.css

.mat-checkbox ::ng-deep  .mat-checkbox-frame {
  border-color: blue !important;
}

Angular заменит его на:

.mat-checkbox[_ngcontent-rvb-c0] .mat-checkbox-frame {
    border-color: blue !important;
}

где _ngcontent-rvb-c0 - уникальный идентификатор текущего компонента

person ConnorsFan    schedule 13.08.2020
comment
Разве это не отменяет также флажки в дочерних компонентах? Не лучше ли использовать .mat-checkbox ::ng-deep .mat-checkbox-frame в home.component.css? - person yurzui; 13.08.2020
comment
Я имел в виду использование приведенного выше кода в home.component.css (я обновлю ответ). Согласно моим тестам, мы также должны указать :home, даже если ::ng-deep находится в дочернем CSS. - person ConnorsFan; 13.08.2020
comment
Да, я понимаю, что этот код должен перейти на home.component.css. - person yurzui; 13.08.2020
comment
@yurzui - Вы предлагали поменять местами ::ng-deep и .mat-checkbox? Я этого не пробовал (и мой stackblitz не настроен для его тестирования). - person ConnorsFan; 13.08.2020
comment
stackblitz.com/edit/angular-hm4bxn? file = src / app / child / - person yurzui; 13.08.2020
comment
И сравните с stackblitz.com/edit / - person yurzui; 13.08.2020
comment
В ПОРЯДКЕ. Я понимаю. Я тестировал простой элемент input в этом stackblitz. - person ConnorsFan; 13.08.2020
comment
Да, я предлагаю заменить :: ng-deep на .mat-checkbox, чтобы охватить правила css только для тех флажков, которые находятся на домашней странице. Но, возможно, мы не знаем обо всех вариантах использования OP, и ваше решение будет работать для этих случаев. - person yurzui; 13.08.2020
comment
@yurzui - Вы можете опубликовать свое предложение в качестве ответа. Я удалю свой. :-) - person ConnorsFan; 13.08.2020
comment
Давайте улучшим свой ответ :) - person yurzui; 13.08.2020
comment
@yurzui - Я просто понимаю, что неправильно прочитал ваш пример (или вопрос). Для меня компонент Home был дочерним, и OP хотел ограничить CSS этим дочерним элементом, например child-1 в этот stackblitz. - person ConnorsFan; 15.08.2020