Angular中为无关联组件复用的元素设置不同CSS属性的方法

下面是几种实用的解决方案，适配Vue、React等主流框架的样式封装逻辑：

方法1：通过Props传递自定义样式标识或高度值 #

让公共组件接受父组件传递的样式参数，动态应用到目标元素上，逻辑清晰且无样式污染。

示例（Vue为例，其他框架逻辑通用） #

公共组件（HelloComponent.vue）：

<template>
  <div :class="['hello', heightClass]" :style="{ height: customHeight }">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  props: {
    // 可选：传递预设类名
    heightClass: {
      type: String,
      default: ''
    },
    // 可选：直接传递高度值
    customHeight: {
      type: String,
      default: 'auto'
    }
  }
}
</script>

<style scoped>
.hello {
  /* 基础样式 */
  padding: 16px;
  border: 1px solid #eee;
}
/* 预设高度类 */
.tall {
  height: 400px;
}
.short {
  height: 150px;
}
</style>

父组件A调用：

<HelloComponent height-class="tall" />

父组件B调用：

<HelloComponent custom-height="120px" />

方法2：使用CSS变量实现作用域内样式覆盖 #

利用CSS变量的特性，父组件在自身作用域内定义变量值，子组件的目标元素引用该变量，实现精准的样式隔离。

示例代码 #

公共组件的样式：

.hello {
  height: var(--hello-height, auto); /* 变量默认值为auto */
  /* 其他基础样式 */
}

父组件A的scoped样式（Vue）：

/* 父组件容器类 */
.parent-a :deep(.hello) {
  --hello-height: 400px;
}

父组件B的scoped样式（Vue）：

.parent-b :deep(.hello) {
  --hello-height: 150px;
}

React（CSS Modules）场景下，父组件样式可以这样写：

.parentB :global(.hello) {
  --hello-height: 150px;
}

方法3：利用框架的深度选择器穿透样式封装 #

如果不想修改组件逻辑，直接用框架提供的深度选择器，在父组件的作用域内覆盖子组件的样式，确保样式只作用于当前父组件下的子组件实例。

Vue示例 #

父组件A的scoped样式：

:deep(.hello) {
  height: 400px;
}

父组件B的scoped样式：

:deep(.hello) {
  height: 150px;
}

React（CSS Modules）示例 #

父组件A的样式文件：

.parentA :global(.hello) {
  height: 400px;
}

父组件A的JSX：

<div className={styles.parentA}>
  <HelloComponent />
</div>

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