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

This is part of a project I did and it worked for the style

app.layout = html.Div(
style={'backgroundColor': 'black'},
children=[
    html.H1('html code')])