Vue 转 React：揭秘 scoped 样式是如何被 VuReact 编译的？

VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue SFC 中的 <style scoped> 作用域样式经过 VuReact 编译后会变成什么样的 React 代码？

前置约定

为避免示例代码冗余导致理解偏差，先明确两个小约定：

文中 Vue / React 代码均为核心逻辑简写，省略完整组件包裹、无关配置等内容；
默认读者已熟悉 Vue 3 中 SFC 作用域样式块的用法。

编译对照

作用域样式转换

VuReact 会计算并生成带作用域标识的 CSS，并借助 PostCSS 处理，将样式选择器与 DOM 属性进行正确的关联注入。

Vue 代码：

html 复制代码

<!-- Counter.vue -->
<template>
  <div class="card">
    <p>Header</p>
    <p class="content">Content</p>
  </div>
  <button>Submit</button>
</template>

<style scoped>
.card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
.card:hover {
  background: #2a8c5e;
}
.content {
  font-size: 12px;
}
</style>

VuReact 编译后 React 代码：

tsx 复制代码

// Counter.jsx
import './counter-abc1234.css';

function Counter() {
  return (
    <div className="card" data-css-abc1234>
      <p>Header</p>
      <p className="content" data-css-abc1234>Content</p>
    </div>
    <button>Submit</button>
  );
}

css 复制代码

/* counter-abc1234.css */
.card[data-css-abc1234] {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
.card[data-css-abc1234]:hover {
  background: #2a8c5e;
}
.content[data-css-abc1234] {
  font-size: 12px;
}

从示例可以看到：Vue 的 <style scoped> 块被编译为带作用域标识的 CSS 文件，并在 React 组件中只对有 class/id 属性的元素标签 自动注入 data-css-{hash} 属性。VuReact 的作用域样式转换功能完全模拟 Vue SFC 的作用域样式隔离机制，确保样式只在当前组件内生效。

作用域注入规则

作用域属性的注入遵循以下规则：

template 元素：不注入作用域属性
slot 元素：不注入作用域属性
存在 class/id 属性的元素 ：自动注入 data-css-{hash} 属性

作用域隔离原理：

CSS 选择器增强 ：将 .card 转换为 .card[data-css-hash]
DOM 属性注入 ：在对应元素上添加 data-css-hash 属性
样式隔离：确保样式只在具有相同作用域属性的元素上生效
避免冲突：防止组件间样式相互影响

编译策略总结

VuReact 的 Scoped 样式编译策略展示了完整的作用域样式转换能力：

PostCSS 处理：通过 PostCSS 处理 Scoped 样式，生成作用域标识
CSS 选择器增强：将普通选择器转换为带作用域属性的选择器
DOM 属性注入：在 React 组件元素中注入作用域属性
文件分离：生成独立的作用域样式文件

VuReact 的编译策略确保了从 Vue 到 React 的平滑迁移，开发者无需手动实现样式隔离。编译后的代码既保持了 Vue 的作用域样式隔离机制，又符合 React 的组件设计模式，让迁移后的应用保持完整的样式隔离能力。

🔗 相关资源

VuReact 官方文档：语义编译对照总览
Github：github.com/vureact-js/...

✨ 如果你觉得本文对你理解 VuReact 有帮助，欢迎点赞、收藏、关注！