Применение CSS из углового компонента к подкомпоненту

Question

У нас есть собственная библиотека компонентов Angular (один проект), каждый компонент имеет базовый стиль.

Мы используем эту библиотеку в нашем приложении (другой проект).

Компонент в приложении содержит компонент из нашей библиотеки.

Из глобального файла styles.scss в приложении я могу точно нацелить элементы в компоненте библиотеки.

Если я перенесу этот глобальный CSS в файл CSS компонента App, попробуйте что угодно, я не могу нацелить какие-либо элементы внутри компонента библиотеки.

Приложение-component.html

<div class="outter">
  <library-component specificityattr></library-component>
</div>

библиотека-component.html

<div class="generic-styles">
  <p class="hello">Hello</p>
</div>

приложение-component.scss

library-component[specificityattr] p.hello {
    background: red;
}

styles.scss

library-component[specificityattr] p.hello {
    background: green;
}

Без селектора в styles.scss я ожидаю, что тег P будет иметь красный фон. Только когда я помещаю тот же селектор в styles.scss, я получаю зеленый фон.

Как это терпит неудачу?

Как правильно стилизовать подкомпоненты компонентов?

Answer 1

То, что вы испытываете, является эффектом ViewEncapsulation компонентов по умолчанию в Angular.

Когда вы определяете компонент, такой как ниже, инкапсуляция вида компонента будет значением по умолчанию, которое я включил в комментарий.Это означает, что Angular не будет создавать так называемый «теневой DOM» для вашего компонента, и все стили будут применяться только к вашему компоненту.

Инкапсулированный компонент

@Component({
    selector: 'my-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    //encapsulation: ViewEncapsulation.Emulated
})

Если вместо этого вы хотите применить стили не только к вашему компоненту, вы можете указать конкретный ViewEncapsulation в объявлении компонента.Использование ViewEncapsulation.None приведет к перемещению стилей в заголовок DOM, и оно все равно не создаст теневой DOM.

Без инкапсуляции

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

Посмотрите на этот пример StackBlitz

Важно иметь в виду, что ViewEncapsulation.None "утечет" ваших стилей в другие компоненты, что, в свою очередь, усложнит стилизациюваше приложение, если вы не знаете точно, где определены ваши стили.

Answer 2

Ваш :host компонент th library-component, и вы хотите применить css к некоторым "глубоким" DOMS, поэтому это означает :ng-deep

Вот рабочий пример

Использование

:host library-component[specificityattr] ::ng-deep p.hello {
    background: green;
}