我尝试对使用TypeScript的CreatElement创建的div应用一些样式，但是样式没有被应用。

EDIT：我通过在style.scss全局项目文件中应用样式解决了这个问题，但我想了解为什么它在此文件中有效，而在组件的scss中无效
组件.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);
   }
 }
}

组件.html

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

组件.scss

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