Python Dash：自定义 CSS

Question

我想将 CSS 样式表或<style>块提供给 Python Dash 应用程序。我试图在下面做这两项，但都不适合我。应用程序加载正常，但文本保持黑色，而不是绿色。

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)

里面./static/stylesheet.css是一个只有这个的文件：

h1{
  color:green;
}

我试过只有样式表或<style>标签，但它们都没有将 h1 标签变成绿色。

这是我为解决我的问题所做的研究：

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

我唯一没有尝试过的（那些链接建议）是从外部链接 (CDN) 加载。但是我希望能够离线加载这个应用程序，所以这不是一个选项。

Answer 1

本地资源（.css、.js）

从Dash v0.22开始，您将包含本地 CSS 文件，如下所示

1. assets在与您的 .txt 文件相同的目录中创建一个文件夹app.py。把你所有的.css和.js文件放在那里。

2. app通过将 the__name__作为第一个参数来初始化对象；使用app = dash.Dash(__name__)而不是app = dash.Dash(). （推理）

3. 现在，Dash 将自动加载您的 CSS 和 JS 文件。要强制执行正确的加载顺序（对于 CSS 尤其重要），建议将文件命名为01_first.css, 02_some_customization.css, ... 25_load_this_last.css。（加载顺序始终是字母数字）

注意：您的自定义 CSS 将包含在Dash 组件 CSS（源）之后。

内联CSS

对于内联 CSS，您可以style使用html.Component.

• 将 CSS 作为 python 字典
• 使用驼峰式键；text-align->textAlign等

例如：

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',
    },
)

Answer 2

这是我做的一个项目的一部分，它适用于这种风格

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