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）加载。但是我希望能够离线加载这个应用程序，所以这不是一个选项。

原文由 David Skarbrevik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

本地资产（.css、.js）

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

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

2. 通过将 __name__ 作为第一个参数来初始化 app 对象；使用 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 ( source ) 之后。

内联 CSS

对于内联 CSS，您可以使用 — 的 html.Component style 参数。

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

原文由 np8 发布，翻译遵循 CC BY-SA 4.0 许可协议