我启动了一个组件库,基于tsdx --template react-with-storybook
,添加chakra-ui/react
为依赖项,然后在其中创建组件。
这些组件使用来自 Chakra 的默认主题的颜色 - 特别是blue.700
.
在 Storybook 中,我将组件包装在 中<ChakraProvider>
,并且它可以工作。我构建了库并将其放在 npm 中。
现在在我的应用程序(基于create-react-app
)中,我安装了库,导入并应用了<ChakraProvider>
,使用了组件——它可以工作,除了样式。
在 HTML 源代码中,我可以看到颜色仍然是 string "blue.700"
,因此没有使用主题将其转换为颜色。
这个脉轮 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 上下文,所以我决定在库中添加一个导出(export { ChakraProvider } from '@chakra-ui/react';
),现在我从我的库中导入它应用程序; 但这没有效果。
会发生什么?有谁知道如何调试这个?