如何自定义 Plotly Dash 核心组件主题？

Question

最近我开始使用 PlotlyDash，我想用它构建一些仪表板。

现在我想在所有使用的组件上应用特定主题以获得一致的所需外观。

例如考虑这个清单项目：

import dash_core_components as dcc

dcc.Checklist(
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    value=['NYC', 'MTL']
)

我注意到您可以通过两个参数为该组件应用不同的样式，即“style”和“labelStyle”。

喜欢这个：

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(
    dcc.RadioItems(
        options=[
            {"label": "Option 1", "value": 1},
            {"label": "Option 2", "value": 2},
            {"label": "Option 3", "value": 3},
        ]
    ),
    id="radioitems",
    style={"padding": "10px", "max-width": "800px", "margin": "auto"},
)

但是，我不知道可以将哪些值传递给这些参数，也找不到所有可用选项的完整列表。

例如，我希望清单中的框遵循以下格式：

.Rectangle {
width: 20px;
  height: 20px;
  padding: 6px 4px 5px 4px;
  background-color: var(--colors-primary-a-500);
}

如果可能的话，我想查看所有自定义选项。这些值都是 CSS 属性吗？

（抱歉，如果问题很简单。我对前端的经验很少）

Answer 1

有一种方法可以覆盖初始应用程序使用 CSS 和 JS 创建的模板，您可以通过此 link 了解更多信息：https://dash.plotly.com/external-resources

来自 Link:

在您的 Dash 应用程序中包含自定义 CSS 或 JavaScript 很简单。只需在应用程序目录的根目录中创建一个名为 assets 的文件夹，并将 CSS 和 JavaScript 文件包含在该文件夹中。 Dash 将自动提供此文件夹中包含的所有文件。默认情况下，请求资产的 url 将是 /assets 但您可以使用 dash.Dash 的 assets_url_path 参数自定义它。

重要提示：对于这些示例，您需要在 Dash 构造函数中包含 name。

即app = dash.Dash(name)而不是app = dash.Dash()。原因如下。

示例：包括本地 CSS 和 JavaScript 我们将创建几个文件：app.py，一个名为 assets 的文件夹，以及该文件夹中的三个文件：

- app.py
- assets/
    |-- typography.css
    |-- header.css
    |-- custom-script.js

app.py

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div(
        className="app-header",
        children=[
            html.Div('Plotly Dash', className="app-header--title")
        ]
    ),
    html.Div(
        children=html.Div([
            html.H5('Overview'),
            html.Div('''
                This is an example of a simple Dash app with
                local, customized CSS.
            ''')
        ])
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
typography.css

body {
    font-family: sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    color: hotpink
}
header.css

.app-header {
    height: 60px;
    line-height: 60px;
    border-bottom: thin lightgrey solid;
}

.app-header .app-header--title {
    font-size: 22px;
    padding-left: 5px;
}

如何自定义 Plotly Dash 核心组件主题？

How to customise PlotlyDash core components theme?

css

python

plotly-dash