ng-deep воздействует на родственные компоненты

Question

Я столкнулся с проблемой с использованием Angular Material Design, где мне нужно было использовать ng-deep, чтобы настроить стиль аккордеона. Тем не менее, я использую аккордеон в другом месте, и он использует те же стили. Это не желательно.

Это должно сделать это? Как мне это исправить?

Answer 1

ng-deep устарела, и поддержка удаляется из основных браузеров. Вы можете прочитать больше об этом в Angular Docs .

Я бы предложил вам вместо этого удалить инкапсуляцию вида из компонента (None удаляет инкапсуляцию стилей для этого компонента, чтобы можно было ориентироваться на стили углового материала).

import { ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-example-component',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss'],
    encapsulation: ViewEncapsulation.None
})

Answer 2

Я обнаружил, что для того, чтобы стили были ограничены компонентом, мне пришлось инкапсулировать код :: ng-deep с помощью: host следующим образом:

:host {
    ::ng-deep {
        /* ... custom styles here */
    }
}