styleUrls不应用于角

Question

我有一个像这样的组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header-main',
  templateUrl: './header-main.component.html',
  styleUrls: ['header-main.component.less']
})
export class HeaderMainComponent implements OnInit {

  searchValue: string;

  constructor() { }

  ngOnInit() {
  }

}

我的模板中有一个div

<mat-form-field class="header_search">

在less文件中

.header_search {
  margin-right: 5px;
  color: red;
}

但是没有应用样式。...为什么？

Answer 1

要为子组件的内容设置样式，可以使用::ng-deep刺穿阴影的后代组合器：

spark_table <- SparkR::read.df(path = '/FileStore/tables/boanf7gu1466936449434/german.data', schema = NULL, na.strings = "NA")
r_table <- SparkR::as.data.frame(spark_table)

有关演示，请参见this stackblitz。

---

另一种方法是关闭组件的view encapsulation：

::ng-deep .mat-tab-label { 
  transform: skew(20deg);
  ...
}

有关演示，请参见this stackblitz。