Angular中条件引入并应用CSS文件的实现方式有哪些？

以下是所有可落地的实现方式，不同方案适配不同的使用场景：

• 运行时动态加载CSS文件
  适合需要根据运行时实时条件（比如用户身份、设备类型、接口返回配置）加载CSS，且不需要频繁切换样式的场景。可以通过Renderer2动态创建link标签插入到页面head中实现：

  import { Component, Renderer2, Inject, OnInit } from '@angular/core';
  import { DOCUMENT } from '@angular/common';
  
  @Component({
    selector: 'app-custom-component',
    templateUrl: './custom.component.html'
  })
  export class CustomComponent implements OnInit {
    constructor(
      private renderer: Renderer2,
      @Inject(DOCUMENT) private document: Document
    ) {}
  
    ngOnInit() {
      // 替换为你的业务判断条件
      const useDarkTheme = localStorage.getItem('theme') === 'dark';
      const cssPath = useDarkTheme ? './dark-theme.css' : './light-theme.css';
      
      const linkElement = this.renderer.createElement('link');
      this.renderer.setAttribute(linkElement, 'rel', 'stylesheet');
      this.renderer.setAttribute(linkElement, 'href', cssPath);
      this.renderer.appendChild(this.document.head, linkElement);
    }
  }
  

  注意：如果使用Angular默认的ViewEncapsulation.Emulated视图封装，动态加载的全局CSS不会自动加组件属性前缀，需要将组件封装模式改为ViewEncapsulation.None，或者给CSS里的选择器加上组件专属类名避免样式污染。

• 编译/初始化阶段指定styleUrls
  适合条件在组件初始化前就能确定、后续不需要切换样式的场景，直接在@Component装饰器的styleUrls参数里按条件传入对应的CSS路径数组即可：

  // 替换为你的判断逻辑，比如根据环境变量、窗口宽度等初始化时就能确定的条件
  const isMobile = window.innerWidth < 768;
  const componentStyles = isMobile ? ['./mobile.component.css'] : ['./desktop.component.css'];
  
  @Component({
    selector: 'app-custom-component',
    templateUrl: './custom.component.html',
    styleUrls: componentStyles
  })
  export class CustomComponent {}
  

• 预导入多份CSS + ngClass条件绑定
  适合需要频繁切换样式（比如主题切换）的场景，是业务开发中最常用的方案。先把所有需要用到的CSS都导入到组件中，每份CSS的选择器加上专属的前缀类名，再通过ngClass给组件根节点绑定对应类名即可生效：

  <!-- 组件模板 -->
  <div [ngClass]="isVipUser ? 'vip-style' : 'normal-style'">
    <!-- 组件内容 -->
  </div>
  

  @Component({
    selector: 'app-custom-component',
    templateUrl: './custom.component.html',
    // 预导入所有需要的CSS文件
    styleUrls: ['./normal.component.css', './vip.component.css']
  })
  export class CustomComponent {
    isVipUser = true; // 替换为业务条件
  }
  

• CSS变量动态覆盖
  适合不同CSS文件的样式差异较小的场景，不需要维护多份完整CSS，只需要把差异值定义为CSS变量，按条件更新变量值即可：

  /* 组件基础CSS */
  :host {
    --bg-color: #fff;
    --text-color: #333;
  }
  .component-content {
    background: var(--bg-color);
    color: var(--text-color);
  }
  

  import { Component, ElementRef } from '@angular/core';
  
  @Component({
    selector: 'app-custom-component',
    templateUrl: './custom.component.html',
    styleUrls: ['./base.component.css']
  })
  export class CustomComponent {
    constructor(private el: ElementRef) {}
  
    toggleTheme(isDark: boolean) {
      const hostEl = this.el.nativeElement;
      if (isDark) {
        hostEl.style.setProperty('--bg-color', '#222');
        hostEl.style.setProperty('--text-color', '#fff');
      } else {
        hostEl.style.setProperty('--bg-color', '#fff');
        hostEl.style.setProperty('--text-color', '#333');
      }
    }
  }
  

内容的提问来源于stack exchange，提问作者Eswar Sai Pallapolu