python 破折号 : Custom CSS

Question

我想提供 CSS 样式表或 <style> block 进入 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. 在您的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',
    },
)