CODEWITHSUNDEEP
cssreactjschakra-ui
Daniel Tehrani
Daniel Tehrani

Reputation: 136

Inject Chakra UI's global style with a specific scope

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?

Upvotes: 2

Views: 3312

Answers (1)

nomadoda
nomadoda

Reputation: 4942

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.

Upvotes: 8

Related Questions