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