Replies: 1 comment 2 replies
-
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 function AppWrap({children}) {
return (
<ChakraProvider theme={{}} resetCSS={true}>
<Global styles={GlobalStyles}/>
<ChakraColorModeProvider>
<Fragment>
{children}
</Fragment>
</ChakraColorModeProvider>
</ChakraProvider>
)
} try it out on |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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: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.
Beta Was this translation helpful? Give feedback.
All reactions