Use two external stylesheets

Dash Python
1

Hey guys,
I am trying to use dash bootstrap components.

So right now I run the app like this:

import dash
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, suppress_callback_exceptions=True, external_stylesheets=external_stylesheets)
server = app.server

But I understand that I have to add the bootstrap stylesheet so I did this:

import dash
import dash_bootstrap_components as dbc
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css', dbc.themes.BOOTSTRAP]
app = dash.Dash(__name__, suppress_callback_exceptions=True, external_stylesheets=external_stylesheets)
server = app.server

Then, the bootstrap url(stylesheet) just takes over and the app ignores the original external stylesheet ('https://codepen.io/chriddyp/pen/bWLwgP.css). its the same affect of totally removing the other external stylesheet.

Am I doing something wrong?
Did anybody try using a second stylesheet like that?
thanks!

2

The app should be using both stylesheets, but there are going to be clashes. For example both sheets define a “container” class, and both set the font in the body element etc. In such cases CSS will use the most recently defined rule. Since you add Bootstrap second it will use the bootstrap styles for anything where there’s a clash.

I would suggest choosing one or the other to use as your primary stylesheet, then if the one you aren’t using has specific features you want that are missing from the other you can copy just those relevant styles into your own stylesheet, renaming classes if necessary to avoid clashes.

1 Like
3

Thank you for th comment! I will try to work with one of the stylesheets.

1 Like
4

So, what’s happening here is actually useful to note: it’s not an issue with Dash but with CSS. A class or id or whatever can have one set of style definitions. A set of style definitions can define a property no more than once. This means that if there is a clash, the last-imported will supersede the earlier imports. One way is to be very restrictive about importing anything at all. Codepen allows you to create a third stylesheet, which contains only what you need. Not only will this reduce your loading time, it will also avoid issues with knowing what the actual properties are.