如何在我的设计系统中添加 antd 或 chackraUI？答案

【问题标题】：How to add antd or chackraUI in my design system?如何在我的设计系统中添加 antd 或 chackraUI？
【发布时间】：2023-02-19 01:38:30
【问题描述】：

我正在实施一个设计系统以在 npm 上发布，为此我需要在其中安装 Ant design 或 Chakra UI，但是当我尝试安装设计系统时它不起作用。由于我没有 Index.js 来对我的设计系统中的库进行初始配置，我该如何让它工作？我正在使用 Rollup.config 技术来创建设计系统。

这是我将要发布的项目。我也接受研究文件的建议。

【问题讨论】：

【解决方案1】：

我假设你的意思是你不能配置 ant/chakra，因为你不能通过 lib 访问它们。

您可以导出index file 库中的所有内容

export * from "antd"

请注意，如果您的库具有相同名称的导出（可能是因为按钮无处不在），您可能需要单独导出您需要的每个东西（有点痛苦，但也是正确的）。

export { THINGS YOU NEED HERE } from "antd"

我想你也可以像这样命名它

export * as Antd from 'antd'

并像使用它

import { Antd } from 'your-lib'

// <Antd.TheComponentYouWant >/

但这在外部公开了 antd 命名，所以我更喜欢前者。

【讨论】：

我不想直接从 antd 导出元素，我需要将它们与 html 元素进行一些组合以导出自定义组件。
你所拥有的看起来不错。例如，当您尝试从库中导入 Button 时会发生什么？
有了 antdesign，它就成功了。我相信一定是 css 被破坏了。为了让我可以使用脉轮 UI 自定义我的组件，我该如何进行初始配置，因为我需要在初始文件中添加一个提供者？
<脉轮提供者> <TheRestOfYourApplication /> </脉轮提供者>
正确的陷阱。您必须从您的索引文件中重新导出 ChakraProvider，然后在您的应用程序中，您将从您的库中导入它而不是直接导入脉轮。基本上如上所述，但仅限于此提供程序组件。如果需要，您也可以在导出到库之前重命名它。