Python Dash: Custom CSS

Question

I want to feed a CSS stylesheet or a <style> block into a Python Dash app. I've attempted to do both below, but neither works for me. The app loads fine, but the text remains black, not green.

import dash

from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from flask import send_from_directory



# define the app
app = dash.Dash()

app.head = [html.Link(rel='stylesheet', href='./static/stylesheet.css'),
    ('''
    <style type="text/css">
    h1 {
        color:green;
    }
    </style>
    ''')]

app.layout = html.Div(html.H1('Hello World!'))


if __name__ == '__main__':
    app.run_server(debug=True)

and inside ./static/stylesheet.css is a file with only this:

h1{
  color:green;
}

I've tried having just the stylesheet or just the <style> tag but neither of those turns the h1 tag green either.

Here is the research I've done to try to solve my issue:

https://github.com/plotly/dash/pull/171

https://dash.plot.ly/external-resources

https://github.com/plotly/dash-recipes/blob/master/dash-local-css-link.py

The only thing I haven't tried (that those links suggest) is to load from an external link (CDN). However I want to be able to load this app offline so that isn't an option.

Answer 1

Local assets (.css, .js)

Starting from Dash v0.22, you would include local CSS files as follows

1. make a assets folder in the same directory as your app.py. Put all your .cssand .js files there.

2. Initialize the app object by giving the __name__ as the first argument; use app = dash.Dash(__name__) instead of app = dash.Dash(). (reasoning)

3. Now Dash will automatically load your CSS and JS files. To force a correct loading order (especially important with CSS), it is recommended to name your files as 01_first.css, 02_some_customization.css, .. 25_load_this_last.css. (the loading order is always alphanumerical)

Note: Your custom CSS will be included after the Dash component CSS (source).

Inline CSS

For inline CSS, you may use the style parameter of the html.Component.

• Give the CSS as a python dictionary
• Use camelCase keys; text-align -> textAlign, etc.

For example:

import dash
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div(
    [html.H1('Demo'), html.H3('Text')],
    style={
        'textAlign': 'center',
        'border': '1px solid red',
    },
)