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

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

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

Answer 2

如果您查看dash-recipies on GitHub，它会为您提供使用本地 css 文件的语法。为了使这项工作，我唯一需要更改的是@app.server.route。而不是：

@app.server.route('/static/<path:path>')

我用过：

@app.server.route('/static/<path>')

Answer 3

本地资源（.css、.js）

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

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

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

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

Answer 4

您没有为 css 服务。正确的方法是在你的 app.py 中添加以下几行

app = dash.Dash()
server = app.server
app.config.suppress_callback_exceptions = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

并使用以下烧瓶代码为您的 css 文件夹提供服务，将其添加到您的 index.py

@app.server.route('/assests/<path:path>')
def static_file(path):
    static_folder = os.path.join(os.getcwd(), 'assests')
    return send_from_directory(static_folder, path)

这将为assets文件夹下的所有内容提供服务。现在假设您有内部文件夹，例如 css、fonts。您可以使用以下方法引用您的 css。

app.layout = html.Div([
    html.Div([
        dcc.Location(id='url', refresh=False),
        html.Link(
            rel='stylesheet',
            href='/assests/css/bootstrap.css'
        ),
        html.Link(
            rel='stylesheet',
            href='/assests/css/styles.css'
        )
    ]),
    html.Div(id='page-content'),

])

Answer 5

可能是你先声明这个css，和<style>标签冲突。