Угловой 6 компонент, применить css к классу, примененному с помощью hostbinding? - PullRequest
Новая
       28

Угловой 6 компонент, применить css к классу, примененному с помощью hostbinding?

0 голосов
/ 17 октября 2018

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

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

Я могу стилизовать элементы внутри моего компонента, например 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?Могу я?Должен ли я?

1 Ответ

0 голосов
/ 17 октября 2018

Похоже, мне нужно использовать :host, это правильно? 

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