CSS隔离模式下能否传递本地类至子组件？

核心思路 #

本地隔离的CSS类（比如Vue的scoped、React的CSS Modules）会被编译成带唯一哈希后缀的类名（比如testing_abc123），直接传原始类名字符串给子组件，子组件找不到对应的哈希类名，所以失效。要解决这个问题，关键是获取编译后的带哈希的类名，再传递给子组件。

具体实现方案 #

1. 保留本地隔离，传递类给子组件 #

以常见框架为例：

• Vue（scoped CSS/CSS Modules）：
  用CSS Modules可以直接通过导出的类名绑定，同时传递给子组件：

  <template>
    <div :class="$style.testing">
      <InputNumber :class="$style.testing" />
    </div>
  </template>
  
  <style module>
  .testing {
    padding: 8px;
    border: 1px solid #ddd;
  }
  </style>
  

  要是用传统scoped样式，也可以通过:deep配合包裹元素实现，但更推荐CSS Modules的方式，类名传递更清晰。

• React（CSS Modules）：
  导入样式文件后，直接使用导出的类名同时绑定到父组件和子组件：

  import styles from './Component.module.css';
  
  function ParentComponent() {
    return (
      <div className={styles.testing}>
        <InputNumber className={styles.testing} />
      </div>
    );
  }
  

2. 让类同时作用于当前组件和子组件 #

上面的示例已经实现了这一点——父组件的根元素和子组件都绑定了同一个带哈希的本地类，样式会同时生效。因为类是本地隔离的，只会影响当前组件和被传递了该类名的子组件，不会污染全局样式。

额外提示 #

如果子组件是第三方UI库组件，要确认它支持接收class/className属性并应用到内部DOM元素。要是遇到不支持的情况，可以给子组件套一层容器，把类加到容器上，再用CSS后代选择器控制子组件样式：

<template>
  <div :class="$style.testing">
    <InputNumber />
  </div>
</template>

<style scoped>
.testing :deep(.input-number) {
  padding: 8px;
  border-color: #2196f3;
}
</style>

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