我自己库中基于 Chakra 的组件没有主题

我基于 tsdx --template react-with-storybook 创建了一个组件库，添加了 chakra-ui/react 作为依赖项，然后在其中创建了组件。

组件使用 Chakra 默认主题的颜色 -- 特别是 blue.700。

在 Storybook 中，我将组件包装在 <ChakraProvider> 中，并且它可以工作。我构建了库并将其放入 npm。

现在在我的应用程序中（基于 create-react-app），我安装了库，导入并应用了 <ChakraProvider>，使用了组件——它可以工作，除了样式。

在 HTML 源代码中，我可以看到颜色仍然是字符串 "blue.700"，因此没有使用主题将其转换为颜色。

这个 Chakra UI 位：

<Box
    BoxSizing="border-Box"
    width={`calc(${width} + ${scrollbarWidth}px)`}
    backgroundColor="blue.700"
    color="gray.100"
>

变成了生成的div所具有的这个CSS类：

.css-p8523l {
    Box-sizing: border-Box;
    width: calc(1200px + 0px);
    background-color: blue.700;
    color: gray.100;
}

ChakraProvider 显然做了一些事情，例如页面中添加了许多 CSS 变量，包括 --chakra-colors-blue-700。

我认为我的应用程序中使用的 ChakraProvider（来自它自己的 @chakra-ui/react 依赖项）使用的 React 上下文可能与库中的不同，因此我决定在库中添加一个导出（{{1 }})，现在我从我的应用程序库中导入它；但这没有效果。

会发生什么？有人知道如何调试吗？

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

相关问答