样式在组件中无法正常工作？

Posted 2023-03-06

【中文标题】样式在组件中无法正常工作？

【英文标题】：Styles not working properly in component?

【发布时间】：2020-06-09 11:45:53

【问题描述】：

我正在尝试使用 :host 属性将 css 应用于 app.component.ts，但它没有被应用。 已应用 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

【问题讨论】：

请注意 :host 处于“工作草案”阶段。所以它还没有被所有浏览器支持。

:host(.active) 仅在组件上有活动类时才用于为组件添加样式。

【参考方案1】：

我不完全确定您到底想要完成什么（问题有点含糊）。据我了解，您对背景颜色不适用感到沮丧。如果是这样，要解决此问题，请将其添加到 :host

display: block;

【参考方案2】：

在 CSS 文件中将 :host 更改为 .card-text 或 .card card-block。

【讨论】：

抱歉——误读了。天太晚了。不过这可能会有所帮助：***.com/questions/49550113/…

这个其实比较有用：***.com/questions/32853924/…