Angular - 如何更改由 TS

Question

我正在尝试将一些样式应用到使用 TypeScript 的 CreatElement 创建的 div，但未应用样式。

编辑：我设法通过在

style.scss

全局项目文件中应用样式来解决问题，但我想了解为什么它在这个文件中而不是在组件的 scss 中起作用

component.ts

export class Component implements OnInit {
 bgAnimation!: any;
 numberOfColorBoxes = 400;

 ngOnInit(): void {
  this.bgAnimation = document.getElementById('bgAnimation');
  for (let i = 0; i < this.numberOfColorBoxes; i++) {
    const colorBox = document.createElement('div');
    colorBox.classList.add('colorBox');
    this.bgAnimation.appendChild(colorBox);
   }
 }
}

component.html

<div class="bgAnimation" id="bgAnimation">
 <div class="backgroundAmim"></div>
</div>

component.scss

.colorBox {
 z-index: 2;
 filter: brightness(1.1);
 transition: 2s ease;
 position: relative;
 margin: 2px;
 background: #1d1d1d;
}