Custom Stylesheets

Reflex allows you to add custom stylesheets. Simply pass the URLs of the stylesheets to rx.App:

You can also add local stylesheets. Just put the stylesheet under assets/ and pass the path to the stylesheet to rx.App:

You can use CSS variables directly in your Reflex app by passing them alongside the appropriae props. Create a style.css file inside the assets folder with the following lines:

Then, after referencing the CSS file within the stylesheets props of rx.App, you can access the CSS props directly like this

Reflex supports SASS/SCSS stylesheets alongside regular CSS. This allows you to use more advanced styling features like variables, nesting, mixins, and more.

To use SASS/SCSS files in your Reflex app:

1. Create a .sass or .scss file in your assets directory
2. Reference the file in your rx.App configuration just like you would with CSS files

Reflex automatically detects the file extension and compiles these files to CSS using the libsass package.

Here's an example of a SASS file (assets/styles.scss) that demonstrates some of the features:

The libsass package is required for SASS/SCSS compilation. If it's not installed, Reflex will show an error message. You can install it with:

This package is included in the default Reflex installation, so you typically don't need to install it separately.

You can take advantage of Reflex's support for custom stylesheets to add custom fonts to your app.

In this example, we will use the IBM Plex Mono font from Google Fonts. First, add the stylesheet with the font to your app. You can get this link from the "Get embed code" section of the Google font page.

Then you can use the font in your component by setting the font_family prop.

By making use of the two previous points, we can also make a stylesheet that allow you to use a font hosted on your server.

If your font is called MyFont.otf, copy it in assets/fonts.

Now we have the font ready, let's create the stylesheet myfont.css.

Add the reference to your new Stylesheet in your App.

And that's it! You can now use MyFont like any other FontFamily to style your components.