如何定制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']
) 

我注意到您可以通过两个参数对这个组件应用不同的样式，即"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创建的模板，您可以通过以下链接找到更多信息：https://dash.plotly.com/external-resources。

来自链接：

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

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

也就是说，app = dash.Dash(name)而不是app = dash.Dash()。这就是为什么。

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

- 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;
}