使用引导程序后 Dash daq.BooleanSwitch() 样式行为不端答案

【问题标题】：Dash daq.BooleanSwitch() style misbehaving after using bootstrap使用引导程序后 Dash daq.BooleanSwitch() 样式行为不端
【发布时间】：2020-08-01 03:25:58
【问题描述】：

我正在尝试在我的 Dash 应用程序中使用引导程序，但是在使用 daq.BooleanSwitch() 时，开关的样式行为异常。

这是我的代码 -

import dash
import dash_daq as daq
import dash_html_components as html

external_stylesheets = ['https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    daq.BooleanSwitch(
        id='my-boolean-switch',
        on=False
    ),
    html.Div(id='boolean-switch-output')
])


@app.callback(
    dash.dependencies.Output('boolean-switch-output', 'children'),
    [dash.dependencies.Input('my-boolean-switch', 'on')])
def update_output(on):
    return 'The switch is {}.'.format(on)


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

输出 - image here

请帮帮我。

【问题讨论】：

任何 sn-p 显示您的问题？
BooleanSwitch 中的 CSS 样式似乎干扰了 BooleanSwitch 的样式。如果您真的想同时使用两者，则需要通过创建自定义样式表自己修复样式。

标签： python bootstrap-4 plotly-dash

【解决方案1】：

您需要在 css 文件中添加 .daq-booleanswitch--light__background { box-sizing: content-box; } 并且它可以工作:)

【讨论】：