从 MUI 迁移到 Shadcn：应对挑战

从一个 UI 库迁移到另一个 UI 库可能是一项艰巨的任务。由于许多开发者正在寻找通过优化包大小和增强设计一致性来改进其应用程序的方法，这个话题现在尤为切题。

迁移之旅

在我们的迁移过程中，我们发现包大小显著减小，主题变得更加连贯，并且我们的设计系统得到了统一。然而，这个过程并非没有挑战。以下是我们在迁移过程中遇到的七个陷阱以及我们如何解决它们。

陷阱 1：Dialog 焦点行为差异

MUI 的 Dialog 组件在每次渲染时会强制夺回焦点，这可能会隐藏潜在的问题。相比之下，Radix 的 Dialog 不会自动管理焦点，从而暴露出之前被 MUI 掩盖的 bug。我们有一些包含依赖异步数据的表单的 dialog。使用 MUI 时，焦点最终会落在输入框上。使用 Radix 时，焦点停留在了 dialog 的主体上。

修复： 我们在表单内实现了显式的焦点管理，以确保一旦数据准备就绪，第一个输入字段就能获得焦点。这使我们更加清楚哪个组件拥有焦点，这是一个积极的结果。

陷阱 2：Drawer 组件错位

MUI 提供了一个 Drawer 组件，旨在用于移动端优先的底部操作面板（bottom sheets）。然而，对于应用外壳（app shell）内的侧边面板，Shadcn 的 Sheet 组件更为合适。我们最初将我们的 drawer 迁移到了 Drawer，这导致了关闭时的动画故障。

修复： 我们切换到了 Sheet，在几分钟内就解决了这个问题。如果你有一个现有的 MUI Drawer，将其映射到 Sheet 以节省时间。

陷阱 3：Select 组件滚动行为

当我们把 Radix 的 Select 放在 Dialog内部时，下拉列表在一个位于 document.body的 portal 中渲染。如果任何祖先元素具有特定的 CSS 属性，例如 transform 或 overflow: hidden，会导致下拉列表滚动整个页面，而不仅仅是列表本身。

修复： 我们调整了 SelectContent 组件的 position 为 "popper"，并确保在 dialog 包装器中没有冲突的 CSS 属性。这解决了滚动问题。

陷阱 4：重写 Select 组件

我们也使用了 react-select 来实现异步加载和多选选项。用 Radix 的 Select 替换它需要进行大量的重写，因为功能上存在差异。

修复： 我们在 Radix 的 <CxSelect /> 和 Popover 之上构建了一个自定义的 Command 组件，以适应各种用例。对于更复杂的场景，我们保留了原始的 react-select 实现。

陷阱 5：主题 Token 映射挑战

MUI 的主题使用 JavaScript 对象，而 Shadcn 的主题依赖于 CSS 变量。这导致了主题 token 的不匹配。

修复： 我们进行了全面的审计，用 Shadcn 的 CSS 变量替换了硬编码的值，以确保整个应用程序的一致性。

陷阱 6：组件所有权与自定义

Shadcn UI 允许开发者直接在他们的项目中拥有并自定义组件，这与传统的组件库不同。这种转变需要改变思维方式和开发实践。

修复： 我们调整了工作流程以接受这种所有权模型，从而能够更好地控制组件的实现和样式。

陷阱 7：依赖管理和冲突

在迁移过程中，我们遇到了 Radix 的 @radix-ui/react-primitive 包的静默更新，它引入了对 @mui/base的新依赖，由于版本冲突导致了构建失败。

修复： 我们将 @radix-ui/react-primitive 包固定到特定版本，并进行了彻底的依赖升级，以对齐所有 MUI 和 Shadcn UI 包。

结论

尽管存在挑战，但从 MUI 迁移到 Shadcn 是值得的。我们实现了包大小的显著减少、主题的改进以及统一的设计系统。

优点

• 减小了包大小，提高了性能。
• 统一的设计系统，增强了一致性。
• 使用 CSS 变量实现更清晰的主题化。

缺点

• 迁移过程复杂，存在多个陷阱。
• 需要对某些组件进行大量重写。
• 过渡期间的依赖管理问题。

注意

本文仅用于教育目的。提到的任何占位符值都必须在你的实现中替换为实际值。在依赖这些声明之前，请始终对照原始来源验证声明。

常见问题

• 从 MUI 迁移到 Shadcn 的主要好处是什么？ —— 主要好处是减小了包大小以及更连贯的主题系统。
• 迁移过程中有哪些常见的陷阱？ —— 常见的陷阱包括焦点管理问题、组件错位以及依赖冲突。
• 我如何确保顺畅的迁移过程？ —— 仔细的规划、彻底的测试，并在每个陷阱出现时予以解决，可以帮助确保更顺畅的迁移。
• MUI 的 Drawer 和 Shadcn 的 Sheet 之间有什么区别？ —— MUI 的 Drawer 专为移动端优先的底侧面板设计，而 Shadcn 的 Sheet 则旨在用于应用外壳中的侧边面板。
• 为什么焦点管理在 UI 组件中很重要？ —— 适当的焦点管理可确保更好的用户体验，特别是对于表单和交互式元素而言。
• 如果遇到依赖冲突，我该怎么办？ —— 将包固定到特定版本并执行依赖升级可以帮助解决冲突。

标签

#mui #shadcn #migration #webdev #UI #react #frontend #development