Inject Chakra UI's global style with a specific scope

user_10610959 0
Viewed 1324

I would like to embed a React application that uses Chakra UI into a website, but Chakra's global style affects the entire website.

Is there a way to inject Chakra's global style with a specific scope?

Thanks.

chakra-ui reactjs css
1 Answers

I suppose you would need to use your own css reset to scope it. There is an existing codesandbox that could be useful, that I didn't author.

  1. Disable the default css reset on <ChakraProvider />
<ChakraProvider resetCSS={false}>
  <div className="chakra-reset">
    ...
  </div>
</ChakraProvider>
  1. Add your own reset css that targets .chakra-reset. You could use this and scope it.
user_77762680
Related