使用深色主题引导 css 样式破折号组件答案

【问题标题】：Style dash components with dark-theme bootstrap css使用深色主题引导 css 样式破折号组件
【发布时间】：2019-10-17 12:34:24
【问题描述】：

我有一个plotly dash 应用程序的工作示例，它在选项卡上显示一个下拉菜单，然后在选择下拉菜单中的项目时显示一个警报。

#!/usr/bin/env python3
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash('Example', external_stylesheets=[dbc.themes.DARKLY])
app.title = 'Example'
app.layout = dbc.Tabs([
    dbc.Tab(
        dbc.Card([
            dcc.Dropdown(id='dropdown',
                         options=[
                             { 'label': 'Item 1', 'value': 'foo' },
                             { 'label': 'Item 2', 'value': 'bar' },
                         ],
            ),
            html.Br(),
            html.Div(id='item-display'),
        ], body=True), label='Tab 1')
])

@app.callback(
    Output('item-display', 'children'),
    [Input('dropdown', 'value')]
)
def display_item(v):
    return dbc.Alert(f'You selected Item {value}', color='primary') if v else ''

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

我正在使用bootswatch darkly theme。

我遇到的问题是我不知道如何使用引导样式设置dash_core_components.Dropdown 的样式。

从下图中可以看出，dash_bootstrap_components 元素的样式都是根据引导样式设置的，但 Dropdown 不是，实际上下拉时的文本几乎不可能按原样阅读非常浅的背景上的白色文本。

在深色示例中，下拉菜单如下所示：

当悬停在一个选项上时，背景是引导程序的“主要”颜色：

如何根据引导样式设置dcc.Dropdown 的样式？

【问题讨论】：

某些 Dash 组件使得使用内部位变得非常困难。您可能需要使用浏览器的开发控制台来查看下拉菜单的结构并创建自定义 CSS 以按照您需要的方式设置每个部分的样式。

标签： python twitter-bootstrap plotly-dash

【解决方案1】：

我注意到您提出了问题on the Plotly forums as well，特别是answer linked in one of the answers 可能包含一个有用的起点。我自己做的是对this answer稍作修改：添加assets/dropdown.css，内容如下：

.Select-control {
    background-color: #222 !important;
}

.Select.is-focused > .Select-control {
    background-color: #222;
}

#school-input {
    color: white;
}

.Select-value-label {
    color: white;
}

.Select--single > .Select-control .Select-value, .Select-placeholder {
    border: 1px solid grey;
    border-radius: 4px;
}

.VirtualizedSelectOption {
    background-color: #222;
    color: white;
 }

.VirtualizedSelectFocusedOption {
    background-color: #222;
    opacity: .7;
}

.Select.is-focused:not(.is-open) > .Select-control {
    background-color: #222;
    border-color: var(--primary); 
    box-shadow: none;
}

结果如下：

【讨论】：