0

我通常在我的应用程序中使用全局 SCSS 文件，但今天我想将一些 scss 限定为我的组件。

我通过@HostBinding(of class.card) 在组件上设置了一个类。

我可以在我的组件中设置项目的样式，例如caard-body，但是如何将覆盖应用到该组件的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：

<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？我可以吗？我是不是该？

4

1 回答 1

0

看来我需要使用:host，对吗？

:host {
  &.card {
    padding: 2rem;
  }
}
于 2018-10-17T15:12:02.907 回答