Is it possible to disable chakra global styles?

[thenano]

We use RSI in an app that uses MUI for the rest of it's styling. This seems to work almost fine, except there are some global chakra styles that leak when rendering RSI which in turn impact our app styles (thinks like body font size, and some spacing get's messed up). I've seen that chakra has a "disableGlobalStyles" prop that can be passed to the provider which the documentation suggests would avoid this sort of leak, so I'm wondering if there's a way this can be done with RSI? I have tried to wrap RSI with a ChakraProvider with the said prop but it didn't have any impact. I'm wondering if there's any other ways to do this that anyone would know of, or if we could pass props that could be set specifically in the provider? Thanks very much!

[masiulis]

Hey @thenano, thanks for bringing this up, we can expose this flag if it would be helpful. PRs are welcome!

[thenano]

Thanks for the reply @masiulis! I had an initial hack at adding those flags to the provider and it didn't solve my problem, and also seemed to impact RSI styles negatively. I'll try and have a deeper look into it and report back.

[schembor]

@thenano Any luck on finding a way to disable the global styles? Otherwise, going to dive into myself and will post my findings

[thenano]

Hey @schembor I have managed to disable the global styles and cssRest by passing disableGlobalStyle: true, resetCss: false to both of the ChakraProvider s in the Providers component (not sure why there are 2 ChakraProvider). This does fix the problem that I had, but it also messes up RSI styles which I think relies on some of the resets. I did some further research and apparently it's possible to add an in place <CSSReset/> from chakra, but I haven't had a chance to test this out. Some discussion about it here: https://github.com/chakra-ui/chakra-ui/issues/2802#issuecomment-1186287297 Thanks!

[masiulis]

Hey @schembor @thenano I didn't realise chakra was polluting global scope without a way to avoid it, that's pretty bad. We can definitely disable the global overrides and add our own.

From the comment: 1.) disableGlobalStyle - we do have table styles defined as global theme, so we cannot enable this flag. (We are planning to change table implementation in v5, but it doesn't fix the current problem) 2.) delete theme.styles.global - If we can do this before applying table styles, then we could delete just the defaults and keep the table styles. I have not checked what is in the default theme.styles.global though. 3.) resetCSS - this one should be enabled and we should copy https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/css-reset/src/css-reset.tsx into our component with global styles fixed into this project until chakra fixes this. 4.) cssVarsRoot - this one should be added and we should use it in our forked code.

So what I think should be done is add resetCSS and cssVarsRoot, copy the /css-reset.tsx into this project, and fix the global styles. I can't promise when I would have time to do this, so PRs would be very much appreciated.

EDIT: previously discussed in #102

[doylio]

Would love to see this change implemented!

FWIW conditionally rendering the import hides the worst of the damage. You can still see the style changing in the background when the modal opens however.

if (isOpen) {
  return <ReactSpreadsheetImport isOpen {...props} />

[fbricenho]

Would it make sense to use Web components for this? https://developer.mozilla.org/en-US/docs/Web/API/Web_components so the element is encapsulated and does not apply chakra ui to the whole DOM?