使用 vanilla-extract 作为 Material-UI 的样式引擎

Question

一些背景

我们的团队使用 Material UI 已经有一段时间了，我们很喜欢它。随着 Material UI v5 的发布，我们花时间检查下一步将使用哪种样式解决方案，因为 JSS 已被 MUI 团队放弃。

我们最终关注了Shopify 人员的讨论。他们对造型解决方案进行了非常详细的比较，最终选择了香草精作为他们的选择工具。强大的 TypeScript 支持，以及最重要的零运行时方法，让我们深信不疑。

遗憾的是，MUI 核心团队在决策时并未考虑香草精。

手头的问题

根据他们的文档， Material UI使用户能够使用各种样式解决方案。可以配置在引擎盖下使用的造型引擎，大致如下所述此处。

问题：

• 使用 vanilla-extract 是否（概念上）可能且（实用上）合理：
  • 设计 MUI 组件？
  • 使用它作为 MUI 底层的样式引擎？
• 洒水会在哪里发挥作用？
• 实施这一方法的具体步骤是什么？
• 有人已经这样做了，并且愿意分享他们的代码吗？

与通常的做法相反，我还没有真正尝试过任何实现方面的方法。根据我的理解，这意味着创建类似于mui-styled-engine（包裹情感）和mui-styled-engine-sc（包裹 styled-components）的东西。因为这对我来说似乎很复杂，所以我想我应该先问一下。

Answer 1

您提供的详细比较不包括jss。但是您可以直接使用jss，无需从MUI 设置。使用react-jss。我不知道零运行时间的事情，但它们也支持打字稿，并且您可以轻松迁移在 MUI4 上编写的现有样式表。您只需更改函数名称，例如将 makeStyle 更改为 createUseStyles。这是整个文档 - https://cssinjs.org/react-jss/?v=v10.9.0

我个人喜欢jss，因为它有助于保持样式与实际组件的完整性。我已经在 MUI 5 提供的样式引擎上使用它，并且对结果非常满意。