dash_daq BooleanSwitch 因 Dash Bootstrap 组件的边框而失败答案

【问题标题】：dash_daq BooleanSwitch fails with border-box from Dash Bootstrap Componentsdash_daq BooleanSwitch 因 Dash Bootstrap 组件的边框而失败
【发布时间】：2021-05-22 22:10:47
【问题描述】：

我想为我的 Dash-Web-App 使用布尔开关。 dash_daq BooleanSwitch 看起来相当不错，但是 dash 引导组件存在问题，因为引导使用边框大小：边框框：带边框的布尔开关：https://i.stack.imgur.com/lgh1T.png
不带边框的布尔开关：https://i.stack.imgur.com/ngDgz.png

是否可以同时使用 dash_daq 和 Dash Bootstrap 组件？或者是否有其他与 Dash Bootstrap 组件兼容的布尔开关？

【问题讨论】：

如果您能展示足够多的代码来演示问题，这将很有帮助，这样我们就有更好的机会帮助您。我不知道 dash_daq 是什么，但不能只为那个元素设置边界框吗？
请看带代码的图片！ daq 布尔开关的代码是 daq.BooleanSwitch(id = 'myid', on=False)

标签： css plotly-dash dash-bootstrap-components

【解决方案1】：

我可以通过为 BooleanSwitch 定义一个 CSS 类然后设置它的所有子类来取消设置 box-sizing 来解决这个问题。

在 app.py 中：

daq.BooleanSwitch(id = 'switch1', on=False, className = 'custom-switch')

在您的样式表中：

.custom-switch *{ 
    box-sizing: unset!important;
}

【讨论】：