html - 将CSS类设置为 Angular 组件问题

我有一个模块，实际上是一张桌子。
table.component.html源代码如下：

<table border=1>
  <theader></theader>
</table>

以及下面的theader.component.html源代码：

<thead #theader>
  <tr><td class="alignCenter underlineText">Table Header</td></tr>
</thead>

此外，style.css的内容如下：

.alignCenter
{
    text-align: center;
}
.underlineText
{
    text-decoration: underline;
}
table
{
    border-spacing: 0;
    border-collapse: collapse;
    width:1660px;
}

我不知道为什么文本“Table Header”不居中对齐。
不过，下面的装饰工程。
即使计算出来的CSS也显示已经对齐的文本。
我附上了一个屏幕转储供你参考。
这是stackblitz中的my app。

最佳答案

您需要重置theader组件样式。

@Component({
  ...
  selector: 'theader',
  styles: [`
   :host {
      width: 100%;
      display: inherit;
   }
 `],
})

https://stackblitz.com/edit/angular-xo5vhq?file=src%2Fapp%2Ftable%2Ftheader%2Ftheader.component.ts