Modifying ChakraProvider to prevent theme collisions

[ZaneH]

Hello, I've just started using reflex and I understand that under the hood, reflex uses Chakra UI for default theming. The project I'm working on is going to use code with lots of inline TailwindCSS class_names=. The problem is that Chakra adds a bunch of unwanted styling to my components. My goal is to disable the Chakra default theme if possible.

The only way I know how to fix it is by going to ./.web and manually changing the <ChakraProvider> code to the following:

- <ChakraProvider theme={extendTheme(theme)}>
+ <ChakraProvider theme={{}} resetCSS={true}>
    <Global styles={GlobalStyles} />
    <ChakraColorModeProvider>{children}</ChakraColorModeProvider>
</ChakraProvider>

I just now realized that when using reflex export this "fix" isn't going to work.

Here's what my page looks like before & after the manual patch:

Before

After (Ignore the minor styling issues, those are my fault)

I've also tried adjusting the rx.Config, rx.App, etc. I'd appreciate any pointers. The closest "official" solution I've seen involves getting the AppWrap for every component and manually adjusting a provider property, but I don't know how to do that either.

[masenf]

If you can wait for our next release, this can be accomplished without a lot of code.

import reflex.components.libs.chakra

reflex.components.libs.chakra.chakra_provider.theme = rx.Var.create_safe({})
reflex.components.libs.chakra.chakra_provider.special_props.add(
    rx.Var.create_safe("resetCSS={true}"),
)

which generates code in the _app.js file like

function AppWrap({children}) {


  return (
    <ChakraProvider theme={{}} resetCSS={true}>
      <Global styles={GlobalStyles}/>
      <ChakraColorModeProvider>
        <Fragment>
          {children}
        </Fragment>
      </ChakraColorModeProvider>
   </ChakraProvider>
  )
}

try it out on reflex==0.3.5a2

[ZaneH]

Thanks for the swift response, after upgrading and running reflex init this worked!

I'm pretty happy with this solution, thanks again.

[kumaraguru1735]

Can you plz simplify for new users and add it to the docs on website please