0

我启动了一个组件库,基于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';),现在我从我的库中导入它应用程序; 但这没有效果。

会发生什么?有谁知道如何调试这个?

4

0 回答 0