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文件

在assets所在的目录中创建一个app.py文件夹。将所有.css和.js文件放在此处。
通过将app作为第一个参数来初始化__name__对象；使用app = dash.Dash(__name__)而不是app = dash.Dash()。（reasoning）
现在Dash将自动加载CSS和JS文件。要强制正确的加载顺序（在CSS中尤其重要），建议将文件命名为01_first.css，02_some_customization.css，.. 25_load_this_last.css。（加载顺序始终为字母数字）

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

内联CSS

对于内联CSS，您可以使用style的{{1}}参数。

将CSS用作python字典
使用camelCase键； html.Component-> text-align等

例如：

textAlign

Answer 4

也许这是关于你首先声明这个css，它与<style>标签冲突。

Answer 5

您不提供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

并使用以下flask代码提供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)

这将在assests文件夹下提供所有服务。现在，假设您有内部文件夹，如CSS，字体。您可以使用以下内容来引用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'),

])

Python Dash：自定义CSS

5 个答案:

本地资产（.css，.js）

内联CSS