与香草提取的多态性反应成分-DEV365 开发者社区

我开始使用vanilla-extract库作为设计系统的基础。一切进展顺利，但是我有一个问题 - 我找不到创建多态反应组件的好方法。我尝试了React TypeScript Cheatsheet，但对我不起作用。我一直在寻找解决方案一段时间，建议我（感谢乔纳坦）查看这个名为dessert-box的方便的小图书馆。这个图书馆在做什么？它使用一种香草提取sprinkles的概念，并将它们与多态性Box组件一起连接。

假设您已经定义了这种洒水：

import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";

const colorProperties = defineProperties({
  conditions: {
    lightMode: {},
    darkMode: { "@media": "(prefers-color-scheme: dark)" },
  },
  defaultCondition: "lightMode",
  properties: {
    color: [{ brand: "#00a98f" }],
  },
});

export const sprinkles = createSprinkles(colorProperties);

现在，您想将它们作为原子传递到Box组件。你可以这样做：

import { createBox } from "@dessert-box/react";

import { sprinkles } from "./sprinkles.css";

export const Box = createBox({ atoms: sprinkles });

现在您可以这样使用：

<Box as="button" color="brand">
  Submit
</Box>

，它都是类型保护的。您不能将color与brand的不同之处传递给Box。现在，您可以在其顶部构建自己的组件，并将它们组合到更复杂的molecules中。这确实有助于编写尽可能少的自定义CSS，而是使用键入的道具来设计您的组件。