问题标签 [vanilla-extract]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

3 问题
Newest
Active
Bountied
318
Unanswered
0 投票
1 回答
403 浏览

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

一些背景

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

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

遗憾的是，MUI 核心团队在他们的决策中没有考虑香草提取物。

手头的问题

根据他们的文档， MUI使用户能够使用各种样式解决方案。可以配置引擎盖下使用的样式引擎，大致描述为here。

问题：

  • 将香草提取物用于：
    • 样式化 MUI 组件？
    • 将其用作 MUI 底层的样式引擎？
  • 洒水会在哪里发挥作用？
  • 实施这种方法的具体步骤是什么？
  • 有人已经这样做了，并且愿意分享他们的代码吗？

与通常的做法相反，我还没有真正尝试过任何东西，实现方式。根据我的理解，这意味着按照mui-styled-engine（包装情感）和mui-styled-engine-sc（包装 styled-components）的方式创建一些东西。因为这对我来说似乎很重要，所以我想我会先问。

0 投票
1 回答
139 浏览

esbuild - 使用 vanilla-extract 和 esbuild 导入图像

我在使用vanilla-extract和esbuild导入图像时遇到问题

我的构建文件：

我的条目.tsx

当我以“css”方式导入图像时

编译器返回错误

无法解析“./x.svg”（插件“vanilla-extract”没有设置解析目录）`

如果我尝试使用 typescript import 导入 x.svg

我还有其他错误

src/style.css.ts:5:16：错误：没有为“.svg”文件配置加载程序：src/x.svg'

是否可以使用vanilla-extract模块导入图像而不将它们标记为external？

0 投票
1 回答
234 浏览

css - 如何用香草精为子元素设置样式？

我开始使用香草提取物来设置 NextJS 应用程序的样式。有没有办法在不创建另一个类的情况下从父元素中设置子元素的样式？

我在反应组件中有这样的结构：

在样式文件中是这样的：


12345678910