✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Assign stylesheet to an app in multipage dash app

Hi,

I am merging 3 Dash apps that used to run independently into a multipage Dash app. One of the apps was built using Dash Bootstrap Components and uses the stylesheet dbc.themes.BOOTSTRAP and two others don’t use bootstrap and a custom css stylesheet.

I understand I can load the two stylesheets and the last one takes precedence when there is a clash by calling:

app = dash.Dash(name, external_stylesheets=[dbc.themes.BOOTSTRAP, ‘assets/custom_styles.css’])

The two stylesheets arent’s very compatible and generate some graphical bugs that are in practice are painful to correct (element not aligned correctly for instance). I would like to minimize refactoring of the code and happy to keep two stylesheets.

Is it possible to assign a stylesheet to an app in the architecture which would greatly simplify my problem? The architecture is:

  • app.py
  • index.py
  • apps
    |-- init.py
    |-- app1.py
    |-- app2.py
    |-- app3.py

app1 uses bootstrap whilst app2 and app3 use a custom stylesheet. How could I say app1 uses one stylesheet and app2 another if possible at all?

Many thanks in advance,
Nick