将查克拉 UI 的全局样式注入特定范围

Question

我想在一个网站中嵌入一个使用Chakra UI的React应用程序，但是Chakra的全局风格会影响整个网站。

是否有办法注入Chakra的全局风格与特定的范围?

Answer 1

我想你需要使用你自己的css重置范围。有一个现有的代码盒，它可能很有用，但不是我写的。

1. 禁用<ChakraProvider />的默认css重置

<ChakraProvider resetCSS={false}>
<div className="chakra-reset">
...
</div>
</ChakraProvider>

2. 添加自己的重置css，目标是.chakra-reset。你可以使用它并限定它的范围。