如何定制PlotlyDash核心组件主题？

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']
) 

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

像这个：

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创建的模板，您可以通过以下链接了解更多信息：https://dash.plotly.com/external-resources

从链接：

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

重要提示：对于这些示例，您需要在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;
}