如何向Streamlit的stHeader标签注入div实现自定义顶部标题栏？

要实现需求，有两种可靠的方式，直接操作DOM或通过CSS定位，以下是具体实现：

方法1：JavaScript直接插入Div到stHeader内部 #

这种方法直接定位到data-testid="stHeader"元素，将自定义div插入其中，布局更稳定：

import streamlit as st

# 注入样式和JS代码
st.markdown("""
<style>
/* 调整stHeader基础样式 */
[data-testid='stHeader'] {
    background-color: #2c3e50;
    padding: 1rem 2rem;
    position: relative;
    border-bottom: 2px solid #34495e;
}

/* 自定义标题栏样式 */
.custom-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
}

.custom-header-bar h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
}

.custom-header-bar .header-meta {
    font-size: 0.9rem;
    opacity: 0.9;
}
</style>

<script>
// 定位stHeader元素
const stHeader = document.querySelector('[data-testid="stHeader"]');
if (stHeader) {
    // 创建自定义标题栏div
    const headerBar = document.createElement('div');
    headerBar.className = 'custom-header-bar';
    headerBar.innerHTML = `
        <h1>业务数据仪表盘</h1>
        <div class="header-meta">更新时间：2024-05-20 | 数据版本：v1.2</div>
    `;
    // 插入到stHeader最前方
    stHeader.prepend(headerBar);
}
</script>
""", unsafe_allow_html=True)

# 仪表盘主体内容
st.write("### 核心数据指标")
st.metric(label="今日销售额", value="¥12,500", delta="+12%")

方法2：CSS定位自定义Div到stHeader区域 #

如果不想用JS，可通过CSS将自定义div定位到stHeader区域，视觉上融合为一体：

import streamlit as st

# 注入样式
st.markdown("""
<style>
/* 隐藏默认stHeader的内部元素（可选） */
[data-testid='stHeader'] > div:first-child {
    display: none;
}

[data-testid='stHeader'] {
    background-color: #2c3e50;
    padding: 0;
    margin: 0;
}

/* 自定义标题栏样式 */
.custom-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

.custom-header-bar h1 {
    margin: 0;
    font-size: 1.6rem;
}
</style>
""", unsafe_allow_html=True)

# 插入自定义标题栏（需放在页面最顶部）
st.markdown("""
<div class="custom-header-bar">
    <h1>业务数据仪表盘</h1>
    <div>数据更新于2024-05-20</div>
</div>
""", unsafe_allow_html=True)

# 仪表盘主体内容
st.write("### 核心数据指标")
st.metric(label="今日销售额", value="¥12,500", delta="+12%")

关键注意事项 #

• 必须设置unsafe_allow_html=True，否则Streamlit会过滤HTML和JS代码。
• 若样式不生效，检查Streamlit版本对应的stHeader DOM结构（版本更新可能会微调元素层级）。
• 方法1的DOM操作更适配不同Streamlit版本，推荐优先使用。

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