Angular 6組件，將CSS應用於通過主機綁定應用的類？

Question

我通常在我的應用程序中使用全局SCSS文件，但今天我想制作一些范圍僅限於我的組件的scss。

我已經通過@HostBinding （ class.card ）在組件上設置了一個類。

我可以在組件內部設置樣式，例如caard-body ，但是如何將替代應用於該組件的card類？

換句話說，我在頁面上有幾張卡片。 我的風格只想應用到這張卡上，以使其看起來與眾不同。 所以我想應用諸如

.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：

<div class="card-header">Testimonials</div>
<div class="card-body">

  <div class="review-image">
    <img class="rounded-circle"
        alt="{{review.acf.article_author.post_title}}"
        src="{{review.acf.article_author.acf.image}}">
  </div>

  <div class="review-content">
    <p class="review">
      <span [innerHTML]="review.content.rendered"></span>
    </p>
    <p class="reviewer-name">{{review.acf.article_author.post_title}}</p>
  </div>

</div>

CSS中用於.card-body和.card-header的選擇器可以正常工作，但是我無法對此.card樣式。 例如，添加此內容不會執行任何操作：

.card { background-color: violet: }

如何在組件的SCSS文件中創建SCSS選擇器，這些選擇器也應用於通過@HostBinding應用於組件的類？ 我可以嗎？ 我是不是該？

Answer 1

看來我需要使用:host ，對嗎？

:host {
  &.card {
    padding: 2rem;
  }
}