Bokeh 3.0+版本Tabs组件Header样式自定义失效求助

在Bokeh 3.0版本后，原通过css_class结合外部样式表自定义Tabs组件的方式失效，且styles字典仅能作用于Tabs根元素，无法修改Header层级的样式（比如移除下方边框）。要解决这个问题，需要利用stylesheet属性直接注入针对子元素的CSS规则。

问题分析 #

styles字典仅能控制Tabs组件的根DOM节点样式，而Header的边框是由子元素（类名为.bk-tabs-header）的CSS规则定义的，因此必须通过自定义CSS选择器来覆盖这个样式。

修复后的代码 #

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

p1, p2 = figure(), figure()

# 统一设置图表背景色
for p in [p1, p2]:
    p.background_fill_color = '#010727'
    p.border_fill_color = '#010727'
    p.outline_line_color = '#010727'

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

# 结合styles控制根元素、stylesheet控制子元素样式
tabs_ = Tabs(
    tabs=[tab1, tab2],
    styles={
        'font-size': '15px',
        'background-color': '#010727',
        'color': 'green'
    },
    stylesheet="""
        /* 移除Tabs Header下方的边框 */
        .bk-tabs-header {
            border-bottom: none !important;
        }
        /* 可选：自定义Tab标题的常规/激活状态样式 */
        .bk-tab {
            color: green;
        }
        .bk-tab.active {
            color: white;
        }
    """
)

show(tabs_)

关键说明 #

1. stylesheet属性：直接写入CSS规则，能够精准定位Tabs的子元素（如.bk-tabs-header是Header容器，.bk-tab是单个Tab标题）。
2. !important标记：强制覆盖Bokeh默认的边框样式，确保自定义规则优先级更高。
3. styles与stylesheet配合：styles控制Tabs根元素的全局样式，stylesheet处理子元素的精细样式，两者互不冲突。

通过这种方式，就能彻底移除Header下方的边框，同时按需自定义其他样式。

内容的提问来源于stack exchange，提问作者ReinholdN