Angular中如何复用同一组件并使用不同CSS文件

因为你拥有本地组件库的修改权限，以下是几种直接有效的实现方式：

方法一：改造组件支持自定义主题切换 #

这种方式保留组件的结构样式，允许使用方替换视觉主题，侵入性低且灵活：

1. 拆分组件库中的样式文件
   将原组件的CSS拆分为两个文件：
   • my-component.structure.css：仅包含布局、间距等结构类样式（必须保留）
   • my-component.theme.css：包含颜色、字体等视觉样式（可替换）
2. 修改组件库的TS文件
   添加@Input()参数控制是否启用自定义主题，同时调整组件的样式引入：

   import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'lib-my-component',
     templateUrl: './my-component.component.html',
     styleUrls: ['./my-component.structure.css', './my-component.theme.css']
   })
   export class MyComponentComponent {
     @Input() useCustomTheme = false;
   }
   

3. 调整组件HTML模板
   根元素添加动态类名，方便使用方定位样式：

   <div [class.custom-theme]="useCustomTheme">
     <!-- 原有HTML内容 -->
   </div>
   

4. 使用方实现自定义样式
   在自己的组件中启用自定义主题，并编写对应样式：

   <!-- 使用方组件的HTML -->
   <lib-my-component [useCustomTheme]="true"></lib-my-component>
   

   /* 使用方组件的CSS */
   .custom-theme {
     background-color: #f5f5f5;
     .title {
       color: #2c3e50;
       font-size: 1.2rem;
     }
   }
   

方法二：通过组件继承完全替换样式 #

适合需要彻底替换所有样式，同时完整复用TS逻辑和HTML的场景：

1. 组件库中提取基类
   将原组件的TS逻辑抽离为抽象基类，保留所有业务逻辑：

   // 组件库中的基类文件
   export abstract class MyComponentBase {
     // 原组件的所有属性、方法、生命周期钩子
     public data: any;
     public handleClick(): void {
       // 原有逻辑
     }
   }
   

2. 原组件继承基类
   组件库中的原组件保持原有样式和模板，继承基类：

   import { Component } from '@angular/core';
   import { MyComponentBase } from './my-component.base';
   
   @Component({
     selector: 'lib-my-component',
     templateUrl: './my-component.component.html',
     styleUrls: ['./my-component.component.css']
   })
   export class MyComponentComponent extends MyComponentBase {
   }
   

3. 使用方创建定制组件
   继承基类，直接引用组件库的HTML文件，指定自己的CSS：

   import { Component } from '@angular/core';
   import { MyComponentBase } from 'your-local-lib-name';
   
   @Component({
     selector: 'app-custom-my-component',
     // 直接引用组件库中的HTML模板
     templateUrl: './node_modules/your-local-lib-name/lib/my-component.component.html',
     // 使用自己的样式文件
     styleUrls: ['./custom-my-component.component.css']
   })
   export class CustomMyComponentComponent extends MyComponentBase {
   }
   

方法三：直接覆盖样式（快速临时方案） #

如果不想改动组件库，可在使用方通过样式穿透覆盖原有样式：

/* 使用方组件的CSS */
:host ::ng-deep lib-my-component {
  /* 覆盖组件根容器样式 */
  background: #ffffff;
  /* 覆盖组件内部元素样式 */
  .inner-element {
    border: 1px solid #eee;
    padding: 1rem;
  }
}

注意：::ng-deep会穿透组件封装，使用时要注意样式优先级，避免影响其他组件。

内容的提问来源于stack exchange，提问作者Almaz Faser