Styling
/
Overview
Reflex components can be styled using the full power of CSS .
There are three main ways to add style to your app and they take precedence in the following order:
You can pass a style dictionary to your app to apply base styles to all components.
For example, you can set the default font family and font size for your app here just once rather than having to set it on every component.
style = { "font_family": "Comic Sans MS", "font_size": "16px", } app = rx.App(style=style)
In your style dictionary, you can also specify default styles for specific component types or arbitrary CSS classes and IDs.
style = { # Set the selection highlight color globally. "::selection": { "background_color": accent_color, }, # Apply global css class styles. ".some-css-class": { "text_decoration": "underline", }, # Apply global css id styles. "#special-input": {"width": "20vw"}, # Apply styles to specific components. rx.text: { "font_family": "Comic Sans MS", }, rx.divider: { "margin_bottom": "1em", "margin_top": "0.5em", }, rx.heading: { "font_weight": "500", }, rx.code: { "color": "green", }, } app = rx.App(style=style)
Using style dictionaries like this, you can easily create a consistent theme for your app.
Inline styles apply to a single component instance. They are passed in as regular props to the component.
Hello World
rx.text(
"Hello World",
background_image="linear-gradient(271.68deg, #EE756A 0.75%, #756AEE 88.52%)",
background_clip="text",
font_weight="bold",
font_size="2em",
)
Children components inherit inline styles unless they are overridden by their own inline styles.
rx.box(
rx.hstack(
rx.button("Default Button"),
rx.button("Red Button", color="red"),
),
color="blue",
)
Inline styles can also be set with a style
prop. This is useful for reusing styles betweeen multiple components.
text_style = { "color": "green", "font_family": "Comic Sans MS", "font_size": "1.2em", "font_weight": "bold", "box_shadow": "rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px", }
Hello
World
rx.vstack(
rx.text("Hello", style=text_style),
rx.text("World", style=text_style),
)
style1 = { "color": "green", "font_family": "Comic Sans MS", "border_radius": "10px", "background_color": "rgb(107,99,246)", } style2 = { "color": "white", "border": "5px solid #EE756A", "padding": "10px", }
rx.box(
"Multiple Styles",
style=[style1, style2],
)
The style dictionaries are applied in the order they are passed in. This means that styles defined later will override styles defined earlier.
As of Reflex 'v0.4.0', you can now theme your Reflex web apps. To learn more checkout the Theme docs .
The Theme
component is used to change the theme of the application. The Theme
can be set directly in your rx.App.
app = rx.App( theme=rx.theme( appearance="light", has_background=True, radius="large", accent_color="teal", ) )
Additionally you can modify the theme of your app through using the Theme Panel
component which can be found in the Theme Panel docs .
Reflex supports Tailwind CSS out of the box. To enable it, pass in a dictionary for the tailwind
argument of your rxconfig.py
:
import reflex as rx class AppConfig(rx.Config): pass config = AppConfig( app_name="app", db_url="sqlite:///reflex.db", env=rx.Env.DEV, tailwind={}, )
All Tailwind configuration options are supported. Plugins and presets are automatically wrapped in require()
:
config = AppConfig( app_name="app", db_url="sqlite:///reflex.db", env=rx.Env.DEV, tailwind={ "theme": { "extend": {}, }, "plugins": ["@tailwindcss/typography"], }, )
You can use any of the utility classes under the class_name
prop:
rx.box(
"Hello World",
class_name="text-4xl text-center text-blue-500",
)
If you want to disable Tailwind in your configuration, you can do so by setting the tailwind
config to None
. This can be useful if you need to temporarily turn off Tailwind for your project:
config = rx.Config(app_name="app", tailwind=None)
With this configuration, Tailwind will be disabled, and no Tailwind styles will be applied to your application.
We support all of Chakra UI's pseudo styles .
Below is an example of text that changes color when you hover over it.
Hover Me
rx.box(
rx.text("Hover Me", _hover={"color": "red"}),
)
Did you find this useful?