如何为TypeScript创建的元素应用CSS（无需编写TS内联样式）

当然可以不用内联样式，你遇到的问题本质是Angular的视图封装机制导致组件内样式无法作用到动态创建的元素。下面给你几种可行的解决方案：

方案1：利用::ng-deep穿透组件样式隔离 #

在组件的CSS文件里，给样式加上::ng-deep前缀（配合父选择器限制作用范围，避免全局污染）：

.testContainer ::ng-deep p {
  color: red;
}

/* 如果是给动态元素加自定义类的情况 */
.testContainer ::ng-deep .red-text {
  color: red;
}

对应的TS代码可给元素添加类：

ngOnInit() {
  let container = document.querySelector('.testContainer')
  if(container) {
    let test = document.createElement('p');
    test.textContent = "Created in TS"
    test.classList.add('red-text') // 给动态元素添加类
    container.append(test)
  } else {
    console.log('TestContainer not found')
  }
}

方案2：禁用当前组件的视图封装 #

在组件装饰器里设置encapsulation: ViewEncapsulation.None，让组件内样式变为全局样式，直接作用到动态元素：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None // 禁用视图封装
})
export class YourComponentComponent implements OnInit {
  // ... 你的其他代码
}

此时组件内原有CSS写法无需修改，就能覆盖动态创建的元素。

方案3：把样式放到全局样式文件 #

Angular项目根目录下的styles.css（或styles.scss等）是全局样式文件，这里的样式会作用到所有页面元素，包括动态创建的。直接把样式移到这里即可：

/* styles.css */
.testContainer p {
  color: red;
}

为什么样式会不生效？ #

Angular默认使用ViewEncapsulation.Emulated模式，会给组件内的原生元素自动添加类似_ngcontent-xxx的属性，同时把组件内的CSS编译成带该属性选择器的样式。而你用TS动态创建的元素没有这个属性，所以组件内样式无法匹配到它，导致样式失效。

内容的提问来源于stack exchange，提问作者Jakob G