shadcn/uiRadix 迁移 Base UI 的类字符串改写完全指南class-mapping 层【免费下载链接】uiA set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.项目地址: https://gitcode.com/GitHub_Trending/ui/ui本篇基于 shadcn/ui 官方仓库ui/ui内置的迁移知识库skills/migrate-radix-to-base/详解其中class-mapping.md所定义的第 2 层迁移规则把所有基于 Radixdata-state的 Tailwind 类选择器、动画惯用法与--radix-*CSS 变量安全地、机械地改写为 Base UIbase-ui/react对应的存在性属性data-open、data-checked与data-starting-style/data-ending-style过渡体系。读完本文你能够独立完成任意 shadcn 组件包装层与应用代码中类字符串的 Radix → Base UI 批量改写并理解每一条规则背后的渲染元素与属性差异。一、class-mapping 在迁移体系中的位置shadcn/ui 仓库在 skills/migrate-radix-to-base/SKILL.md 中定义了一套完整的 Radix → Base UI 迁移流程其知识体系分为多个层次变换引擎transformation engine处理导入改写radix-ui与radix-ui/react-*两种形态、asChild→render、Portal Positioner Popup结构重组等规则见 universal-patterns.md各组件族的 props 映射表覆盖浮层overlays.md、表单控件form-controls.md、菜单、披露组件、展示组件等类字符串改写layer 2即本文主角 class-mapping.md它专门负责不动 JSX 结构、只改类字符串的那部分工作。原始文档对这一层的定位非常明确Apply these across ALL class strings (className, cva definitions, cn calls), including app code. They are safe, mechanical rewrites.也就是说这批改写必须作用于所有类字符串——组件包装层里的className属性、cvaclass-variance-authority变体定义、cn()调用——并且应用代码app code中出现的类同样要改写。它们被设计为安全、机械的替换不需要理解组件行为逐条查表即可这也是它们能作为自动化迁移流水线中一个独立图层运行的原因。该知识库本身有据可查universal-patterns.md 说明其地面真值ground truth来自对仓库内 61 组组件配对apps/v4/registry/bases/{radix,base}/ui/的机械 diff以及radix-ui1.4.3包导出与base-ui/react1.6.0文档索引的核对。因此下面每条改写规则都可以在仓库的真实注册表registry源码中找到实例印证。二、Data-attribute 选择器改写从data-state到存在性属性Radix 通过单个data-state属性的取值来表达组件状态data-stateopen、data-statechecked……而 Base UI 改用存在性属性presence attribute属性存在即代表该状态。这导致 Tailwind 的数据属性变体语法整体变化。以下是原文档的完整改写表原样保留Radix 模式Base UI 模式data-[stateopen]:data-open:data-[stateclosed]:data-closed:data-[statechecked]:data-checked:data-[stateunchecked]:data-unchecked:data-[stateactive]:tabsdata-active:data-[stateon]:toggledata-pressed:data-[highlighted]:data-highlighted:不变data-[disabled]:data-disabled:不变data-[side...]:data-[side...]:不变仍是参数化选择器group-data-[stateopen]/peer-data-[stateopen]group-data-open/peer-data-open子菜单触发器打开标记data-[stateopen]:data-popup-open:三点值得注意不是所有选择器都要改。data-[highlighted]、data-[disabled]在两侧写法相同data-[side...]依旧是需要参数化的选择器Base UI 扩展了取值见下文动画一节原样保留即可。group-/peer-前缀变体同样适用只要基础选择器从data-[stateopen]变成data-open带前缀的复合变体必须同步改写否则打开时兄弟元素变色这类联动样式会静默失效。新增的 Base UI 钩子是data-popup-openRadix 中子菜单触发器处于打开状态依赖data-[stateopen]Base UI 则使用专门的data-popup-open存在性属性select 的 Icon 也暴露该属性用于打开时旋转样式见 form-controls.md。三、动画惯用法从 keyframes 到 transition 起终点样式这是本次迁移中唯一不能 1:1 照抄的一类改写。Radix 侧的进入/退出动画依赖 tw-animate 的 keyframes 工具类配合data-state选择器触发data-[stateopen]:animate-in>// 遮罩层L31 cn-sheet-overlay fixed inset-0 z-50 transition-opacity duration-150 contenteditable="false">【免费下载链接】uiA set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.项目地址: https://gitcode.com/GitHub_Trending/ui/ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考