Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Let top level theming for class_name work. #4423

Open
hjpr opened this issue Nov 22, 2024 · 2 comments
Open

Let top level theming for class_name work. #4423

hjpr opened this issue Nov 22, 2024 · 2 comments
Labels
feature request A feature you wanted added to reflex

Comments

@hjpr
Copy link
Contributor

hjpr commented Nov 22, 2024

When doing top level styling at the rx.App level, passing class_name to a component as part of a style library doesn't work. I enjoy the coloring and theming of tailwind so I'd like to be able to say

style = {
    rx.flex: {
        "class_name": "bg-white dark:bg-zinc-700"
    },
    rx.text: {
        "class_name": "text-zinc-700 dark:text-zinc-50"
    }
}

app = rx.App(style=style)

Don't have the reflex know-how to understand where the css interpretation is happening and create a conditional for tailwind prop.
Thanks!

Copy link

linear bot commented Nov 22, 2024

@hjpr
Copy link
Contributor Author

hjpr commented Nov 25, 2024

Attempted to tackle this but feel like I'm missing something...

  • During init of the Style class I can get the class_names specified in the App.style to log once when the Style initializes for the two components I have specified in the example above, but when attempting to save those to kwargs["class_name"], in the Component init, the style_dict of all the sub components doesn't contain the class_names and thus doesn't propagate.

So then I tried to debug...

  • I can affect all values of all components by manually setting the style_dict during the init of Style to something like style_dict["class_name"]="bg-white". Then every component has a white background.

I'm guessing there's some magic I'm missing when components initialize that I don't seem to understand.

@Lendemor Lendemor added feature request A feature you wanted added to reflex and removed custom component request labels Dec 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request A feature you wanted added to reflex
Projects
None yet
Development

No branches or pull requests

2 participants