css - 如何在没有任何边框的 gridspec 中排列 pyviz 面板小部件？

Question

我想在 gridspec 的帮助下安排 pyviz 面板小部件。预期的结果是没有任何边框的屏幕。在示例中，绿色区域匹配得很好，但是蓝色小部件周围有（白色）边框？我怎样才能删除它？我尝试使用代码中显示的 css，但没有成功。

import panel as pn
css = '''
.widget-box {
  background: blue;
  border-radius: 0px;
  border: 0px none solid;
}
'''
pn.extension(raw_css=[css])
gspec = pn.GridSpec(width=200, height=200)
gspec[0,   0:2] = pn.pane.Markdown("Grid1", background='green' , margin=0)
gspec[1,   0:1] = pn.pane.Markdown("Grid2", background='green' , margin=0)
gspec[1,   1] = pn.widgets.FloatSlider(name='Widget', margin=0, css_classes=['widget-box'])
gspec

Answer 1

一种可行的替代方法是

import panel as pn
css = '''
.widget-box {
  background: blue;
  border-radius: 0px !important;
  border-width: 0px !important;
}
'''
pn.extension(raw_css=[css])
gspec = pn.GridSpec(width=200, height=200)
gspec[0,   0:2] = pn.pane.Markdown("Grid1", background='green' , margin=0)
gspec[1,   0:1] = pn.pane.Markdown("Grid2", background='green' , margin=0)
gspec[1,   1] = pn.widgets.FloatSlider(name='Widget', margin=0, css_classes=['widget-box'])
gspec.servable()

在此处查看屏幕截图

Answer 2

“.widget-box”类已经定义并且在边框上有“！important”属性： https ://github.com/holoviz/panel/blob/master/panel/_styles/widgets.css

在您的情况下，您应该只使用不同的 css 类，例如“my-widget-box”，它应该可以工作或使用“！important”css 属性