时间戳

首页 > 解决方案 > Angular：组件标签上的样式类

css - Angular：组件标签上的样式类

问题描述

是否可以在组件上应用这样的类或样式？

元素组件

@Component({
  selector: 'app-element',
  templateUrl: './element.component.html',
  styleUrls: ['./element.component.scss']
})

容器组件模板

<app-element class="button"></app-element>

全局.css

.button {
  background :red;
}

标签： cssangular

解决方案

是的，这是可能的。另一种方法是:host在您的组件样式中使用：

:host(.customClass) {
  background: blue;
}

您也可以像这样直接向组件添加样式：

 :host {
      background: blue;
 }

或在您的 .ts 文件中：

@Component({
   selector: 'your-component',
   template: 'your-component.html',
   host: {'class': 'customClass'}
})

:host 您可以在此处阅读更多信息。

推荐阅读