Angular 13中如何为复用卡片组件应用不同样式？

核心思路 #

不需要新增多个独立样式表，通过基础样式+差异化扩展的方式就能实现，以下是几种实用方案：

方案1：基础CSS类+页面专属扩展类 #

先定义卡片的通用基础样式，再为每个页面的特殊需求写独立的扩展类，复用同一个主样式表即可。

/* 基础通用样式（所有页面共享） */
.card {
  border: 1px solid #eee;
  border-radius: 4px;
}
.card-title {
  margin: 0 0 8px;
  font-size: 18px;
}
.card-content {
  margin-bottom: 12px;
  line-height: 1.5;
}
.card-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 页面1专属样式 */
.card-page1 {
  padding: 10px;
  background-color: white;
  text-align: center;
}

/* 页面2专属样式 */
.card-page2 {
  padding: 16px;
  text-align: left;
}
.card-page2 .card-btn {
  background-color: lightblue;
}

/* 页面3专属样式 */
.card-page3 {
  text-align: center;
}
.card-page3 .card-btn {
  background-color: green;
}

使用时，给卡片添加对应页面的类：

• 页面1：<div class="card card-page1">...</div>
• 页面2：<div class="card card-page2">...</div>
• 页面3：<div class="card card-page3">...</div>

方案2：CSS变量实现动态样式 #

通过定义CSS变量，在不同页面的根元素中覆盖变量值，卡片样式直接引用变量，灵活性更高。

/* 基础样式（使用变量定义可变属性） */
.card {
  padding: var(--card-padding, 12px);
  background-color: var(--card-bg, #fff);
  text-align: var(--card-text-align, left);
  border: 1px solid #eee;
  border-radius: 4px;
}
.card-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--btn-bg, #ccc);
}

然后在每个页面的样式块中设置变量：

• 页面1：

:root {
  --card-padding: 10px;
  --card-bg: white;
  --card-text-align: center;
}

• 页面2：

:root {
  --card-padding: 16px;
  --card-text-align: left;
  --btn-bg: lightblue;
}

• 页面3：

:root {
  --card-text-align: center;
  --btn-bg: green;
}

方案3：框架环境下的Props传递样式 #

如果是React、Vue这类框架项目，可以直接通过组件Props传递样式对象，无需额外编写CSS类。

以React为例：

// 可复用卡片组件
function Card({ title, content, cardStyle = {}, btnStyle = {} }) {
  return (
    <div className="card" style={cardStyle}>
      <h3 className="card-title">{title}</h3>
      <p className="card-content">{content}</p>
      <button className="card-btn" style={btnStyle}>操作按钮</button>
    </div>
  );
}

// 页面1调用
<Card 
  title="卡片标题" 
  content="段落内容..." 
  cardStyle={{ padding: '10px', backgroundColor: 'white', textAlign: 'center' }}
/>

// 页面2调用
<Card 
  title="卡片标题" 
  content="段落内容..." 
  cardStyle={{ padding: '16px', textAlign: 'left' }}
  btnStyle={{ backgroundColor: 'lightblue' }}
/>

// 页面3调用
<Card 
  title="卡片标题" 
  content="段落内容..." 
  cardStyle={{ textAlign: 'center' }}
  btnStyle={{ backgroundColor: 'green' }}
/>

关于样式表的说明 #

不需要新增多个独立样式表，以上方案都可以基于一个基础样式表完成。如果是纯静态页面，方案1最省心；如果需要频繁调整样式，方案2的变量方式更灵活；框架项目则优先用方案3的Props传递。

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