Переопределить стили родительского компонента в дочернем компоненте

Question

У меня есть родительский компонент parent.html, и у него есть стили CSS, как показано ниже

.style1{
color:red
}
.style2{
color:red
}

, и я повторно использую этот компонент в child.html.Теперь я хочу переопределить стили родительского компонента в дочернем компоненте.Я пытаюсь использовать ::ng-deep, это работает, но если загрузить Parent component, какие стили переопределяют в дочернем компоненте, это также отражается в родительском компоненте ...

Я хочу переопределить только стили в дочернем компоненте, ноне должен отражаться в родительском компоненте.Как мы можем это сделать?

Answer 1

Я думаю, что у вас должно быть два компонента с двумя отдельными каталогами, и он должен иметь файлы html, ts, css.

Так что в html родительского компонента вы будете ссылаться на дочерний компонент -
parent.component.html -> <app-child> </app-child>

В дочернем компоненте должны быть файлы - child.component.html, child.component.ts, child.component.css.
Есливы создаете и добавляете любые подобные стили, такие как файл parent.component.css, в child.component.css, после чего они добавляются к каждому компоненту, например p[random_atttr_value], поэтому теперь у вас будут отдельные стили для дочернего элемента p.

Это стандартное поведение angular, входит в инкапсуляцию вида.Используется в angular-подобной технологии тени DOM, которая поддерживается не всеми браузерами, но angular делает это следующим образом.
Другими словами, он добавляет некоторые атрибуты к каждому компоненту, отображаемому в браузере.
ViewEncapsulation имеет 3 параметра -

encapsulation: ViewEncapsulation.None, 
           ViewEncapsulation.Emulated, (-- this is default)
           ViewEncapsulation.Native (-- only applies to browsers with shadow DOM technology)<br>

Надеюсь, это поможет вам решить вашу проблему.

Answer 2

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

child-component .style1{
   color:red
}

child-component .style2{
   color:red
}