如何解决我自己库中基于 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 举报,一经查实,本站将立刻删除。