Стили не работают должным образом в компоненте?

Question

Я пытаюсь применить css к app.component.ts, используя свойство: host, но оно не применяется. Css применяется, но не правильно

.ts

export class AppComponent  {
  title = "Default Title"
  data = 'This is default data'

  @HostListener('mouseover') displayMessage(){
    this.title = "Updated Title"
    this.data = 'This is updated data'
  }
  @HostListener('mouseout') displayMessage2(){
    this.title = "Default Title"
    this.data = 'This is default data'
  }
}

. html

<div class="card card-block">
  <h4 class="card-title">{{title}}</h4>
  <p class="card-text">
    {{data}}
  </p>
</div>

. css

:host {
  background-color: red;
  border : 1px solid black;
}

Ссылка

https://stackblitz.com/edit/angular-hzu2zm?embed=1&file=src / app / app.component. css

Answer 1

Я не совсем уверен, что именно вы пытаетесь сделать sh (вопрос немного расплывчатый). Насколько я понимаю, вы разочарованы тем, что цвет фона не применяется. Если это так, чтобы это исправить, добавьте это в: host

display: block;

Answer 2

Измените :host на .card-text или .card card-block в файле CSS.