Компонент Angular 6, применить CSS к классу, примененному с привязкой хоста? ⇐ CSS

[Anonymous]

Обычно я использую глобальный файл SCSS в своих приложениях, но сегодня я хотел сделать несколько scss ограниченными только моим компонентом.

Я установил класс для компонент через @HostBinding (class.card).

Я могу стилизовать элементы внутри моего компонента, например как тело карты, но как я могу применить переопределения к классу карты этого компонента?

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

Код: Выделить всё

.card { background-color: violet; }

Чтобы только эта карта была фиолетовой. Я хочу сделать этот CSS частью этого компонента, чтобы везде, где я его использую, он автоматически получал фиолетовую карту. (На самом деле я хочу чего-то большего, чем простая вещь, но вы поняли)

Мой компонент TS:

Код: Выделить всё

import { Component, Input, HostBinding } from '@angular/core';

@Component({
selector: 'app-reviews',
templateUrl: './reviews.component.html',
styleUrls: ['./reviews.component.scss']
})
export class ReviewsComponent {
@HostBinding('class.card')
true;

@Input()
review;

constructor() {}
}

Мой компонент SCSS:

Код: Выделить всё

.card-header {
border: 0;
color: #cf0989;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 2rem;
font-weight: normal;
}

.card-body {
...
}

Мой компонент HTML:

Код: Выделить всё

Testimonials


[img]{{review.acf.article_author.acf.image}}[/img]



{{review.acf.article_author.post_title}}

Селекторы в моем CSS для .card-body и .card-header работают нормально, но я не могу стилизовать этот .card код>. Например, добавление этого ничего не дает:

Код: Выделить всё

.card { background-color: violet: }

Как создать селекторы SCSS в файле SCSS компонента, которые также будут применяться к классу, примененному к компоненту через @HostBinding? Могу я? Должен ли я?

Подробнее здесь: https://stackoverflow.com/questions/528 ... ostbinding