Стиль компонента Pierce глобально - PullRequest
Новая
       29

Стиль компонента Pierce глобально

0 голосов
/ 13 июня 2019

Мне нужно проколоть стили моего компонента из глобального файла styles.scss.

По сути, я использовал mat-card компонент, заключенный в custom-component.В некоторых случаях я хочу изменить стили на мат-карту, когда пользовательскому компоненту предшествует другой custom-component

Идея была бы:

global-styles.scss 

custom-component ~ custom-component::ng-deep { 
    .mat-card {
       background-color: red;
    }
}

host-context показалось хорошей идеей, я попробовал это так

custom-component.scss 

// does not work
host-context(~custom-component) { background-color: red; }

Я пробовал это и некоторые другиекомбинации, но они, кажется, не работают.Как мы должны использовать селекторы>, ~, + для стилизации угловых компонентов?

Приветствия

1 Ответ

1 голос
/ 13 июня 2019

Лично я избегаю прокалывания селекторов любой ценой.Он ломает всю компонентную модель и тесно связывает код.

Я бы подошел к этому немного по-другому.У моего custom-component есть необязательный Input() embedded = false

Ваше использование может быть следующим: 

// top level
<custom-component></custom-component>

// nested level
<custom-component [embedded]="true"></custom-component>

Затем используйте ngClass со свойством embedded длявызвать изменение цвета.

См. документацию для получения дополнительной информации о ngClass https://angular.io/api/common/NgClass

...