Importing a stylesheet
Stylesheet imports are triggered via Framework’smail
, similarly to other features discussed in Backend-initiated actions. When the import is triggered, the front-end downloads the specified stylesheet and creates a style
element with its contents.
The import_stylesheet
method takes the stylesheet_key
and path
arguments. The first works as an identifier that will let you override the stylesheet later if needed. The second is the path to the CSS file.The path specified needs to be available to the front-end, so storing it in the /static
folder of your app is recommended.
The following code imports a stylesheet when handling an event.
Use versions to avoid caching. During development time, stylesheets may be cached by your browser, preventing updates from being reflected. Append a querystring to bust the cache, e.g. use
/static/custom.css?3
.Applying CSS classes
You can use the property Custom CSS classes in the Builder’s Component Settings to apply classes to a component, separated by spaces. Internally, this will apply the classes to the root HTML element of the rendered component.
Tips for effective stylesheets
The CSS code for the class used earlier,bubblegum
, can be found below. Note how the !important
flag is used when targetting style attributes that are configurable via the Builder. If the flag isn’t included, these declarations will not work, because built-in Framework styling is of higher specificity.
Component structure may change. When targeting specific HTML elements inside components, take into account that the internal structure of components may change across Framework versions.
bubblegum
class, its children will also have a pink background by default.

Targeting component types
Framework components have root HTML elements with a class linked to their type. For example, Dataframe components use the class CoreDataframe. When writing a stylesheet, you can target all Dataframe components as shown below.Implementing themes
It’s possible to switch stylesheets during runtime, by specifying the samestylesheet_key
in subsequent calls. This allows you to implement a “theme” logic if desired, targeting the whole or a specific part of your app.