Default CSS completely missing in minimal example

Dash Python
1

Hey all, I’m running Plotly 5.18.0 and Dash 2.15.0 on Windows. (I think those are the latest, I just ran pip install --upgrade dash plotly.) Python version is 3.11.0. When I run the most minimal Dash app possible, it looks like a big part of the CSS is missing. DCC components seem to be styled, but everything else looks wrong. I’m pretty sure the fonts and colors should be different.

from dash import Dash, html, dcc

app = Dash(__name__)

app.layout = html.Div([
    html.H1(children="Testing 1 2 3"),
    html.P(children="test test test"),
    dcc.Dropdown(["test"])
])

if __name__ == "__main__":
    app.run()

image
image746×229 6.4 KB

I get this in both Chrome and Firefox, with both app.run(debug=True) and app.run(debug=False). I don’t see any errors in stdout nor in the browser’s dev tools. If I inspect the h1 or the p in my browser, I see that there are no styles applied to them whatsoever. Am I doing something wrong here?

2

HI @pyo welcome to the forums.

What CSS are you missing? In the code you provided, there is no style applied, neither inline nor via external css- file.

Not sure if I understand the question right.

Maybe this gets you started:

3

Sorry for the confusion. My question is, shouldn’t it look something like this minimal example here as far as fonts and colors go? What is this example doing that I’m not doing? I don’t need custom styles, I just need something that looks kind of professional, whether that’s something built in or a 3rd-party library.

image
image1098×715 24.6 KB

4

Hi @pyo and welcome to Dash :slightly_smiling_face:

The Dash docs are styled with Dash Design Kit, which is a Dash Enterprise feature. You can find more information about styling your app in the Dash in 20 Minutes tutorial.

1 Like
5

Thanks, that answers my question, and it appears that the claim in the tutorial that “a minimal Dash app will typically look like this” is false.

6

hi @pyo
Your point is taken. It’s not obvious that ddk is used to build the Dash docs.
I really like the dmc.Paper component. You can use that to quickly and efficiently style your Dash content.

7

@pyo You can also use Dash Bootstrap Components to give your app a theme. You can find lots of information here: