✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Styling
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:
- Inline: Styles applied to a single component instance.
- Component: Styles applied to components of a specific type.
- Global: Styles applied to all components.
Style keys can be any valid CSS property name.
To be consistent with Python standards, you can specify keys in
snake_case.Global Styles
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)Component Styles
In your style dictionary, you can also specify default styles for specific component types or arbitrary CSS classes and IDs.
accent_color = "#f81ce5"
style = {
"::selection": {
"background_color": accent_color,
},
".some-css-class": {
"text_decoration": "underline",
},
"#special-input": {"width": "20vw"},
rx.Text: {
"font_family": styles.SANS,
},
rx.Divider: {
"margin_bottom": "1em",
"margin_top": "0.5em",
},
rx.Heading: {
"font_weight": "500",
},
rx.Code: {
"color": accent_color,
},
}
app = rx.App(style=style)Using style dictionaries like this, you can easily create a consistent theme for your app.
Note the use of the uppercase component names.
We specify the component classes as keys, rather than their constructors.
Watch out for underscores in class names and IDs
Reflex automatically converts
snake_case identifiers into camelCase format when applying styles. To ensure consistency, it is recommended to use the dash character or camelCase identifiers in your own class names and IDs. To style third-party libraries relying on underscore class names, an external stylesheet should be used. See custom stylesheets for how to reference external CSS files.Inline Styles
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",
)Tailwind
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: Hello World
rx.box(
"Hello World",
class_name="text-4xl text-center text-blue-500",
)Disabling Tailwind
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.
Special Styles
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"}),
)Style Prop
Inline styles can also be set with a
style prop. This is useful for reusing styles betweeen multiple components.Hello
World
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",
}
rx.vstack(
rx.text("Hello", style=text_style),
rx.text("World", style=text_style),
)You can also pass in multiple style dictionaries to the
style prop to combine styles.Multiple Styles
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.
Copyright © 2023 Pynecone, Inc.