覆盖选项卡的 DOM 样式，标题级别

Question

我一直在尝试使用 css_class 自定义我的 Tab 小部件，用 style.css 覆盖它，就像我以前在没有以前的散景版本的情况下所做的那样，尽管从 3.0 开始。同样的方法不起作用。我尝试使用 css_classes、样式、样式表，唯一运行良好的是样式，我可以传递字典并覆盖根值。 我的问题是我试图达到标题级别以更改 border-bottom-color，甚至将 border-bottom 更改为 0px。

:host(.bk-above) .bk-header {
1. border-bottom: 1px solid #0e0922;
   1. border-bottom-width:1px;
   2. border-bottom-style: solid;
   3. border-bottom-color: rgb(14, 9, 34); }

我检查了控制台中的元素，我检查了散景文档css_widgets。我尝试了很多不同的方法，但我无法让它发挥作用。

最小样本：

from bokeh.models import TabPanel, Tabs
from bokeh.plotting import figure, show


#dir(Tabs)
#Tabs.parameters()

p1, p2 = figure(), figure()

p1.background_fill_color = '#010727'
p1.border_fill_color =  '#010727'
p1.outline_line_color = '#010727'

p2.background_fill_color = '#010727'
p2.border_fill_color =  '#010727'
p2.outline_line_color = '#010727'

tab1 = TabPanel(child=p1, title="Fastest Lap")
tab2 = TabPanel(child=p2, title="Median Lap")

tabs_ = Tabs(tabs=[tab1, tab2], styles={ 'font-size':'15px', 'border-bottom': '0px', 'align':'right', 'header border-bottom-color':'green',  'border-bottom-color':'green', 'background-color':'#010727', 'color':'green'})


show(tabs_)
#dir(Tabs.styles)
#Tabs.styles.get_value(tabs_)

Answer 1

从 Bokeh 3.0 开始，您现在可以将整个样式表直接注入组件。在你的情况下你可以这样做：

stylesheet = """
:host(.bk-Tabs) {
  background-color: #010727;
}

:host(.bk-Tabs) .bk-header {
  color: green;
  font-size: 15px;
  border-bottom: 1px solid red;
}
"""

tabs_ = Tabs(tabs=[tab1, tab2], stylesheets=[stylesheet])