如何用CSS修改StreamLit iframe内按钮的颜色

问题背景 #

开发集成streamlit-text-label组件的Streamlit应用时，需要修改组件内置AntD蓝色按钮的颜色以满足无障碍需求。常规CSS注入可修改主页面的Streamlit按钮，但无法作用于组件的iframe内部元素。

原因分析 #

streamlit-text-label组件的内容渲染在独立iframe中，浏览器CSS规则无法跨文档（iframe属于独立文档）生效，因此直接通过主页面CSS选择器无法修改iframe内的按钮样式。

解决方案 #

通过JavaScript获取iframe的文档对象，直接在iframe内部注入CSS样式，绕过CSS跨文档限制。具体步骤：

• 等待页面加载完成，定位目标iframe
• 监听iframe加载事件，确保内部DOM已初始化
• 在iframe的文档中添加自定义样式，覆盖AntD按钮的默认颜色

完整代码示例 #

import streamlit as st
from streamlit_text_label import label_select

st.markdown(
    """
    <style>
        /* 主页面按钮样式（验证用） */
        div.stButton > button {background-color: green;}
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 定位streamlit-text-label对应的iframe
            const labelIframe = document.querySelector('iframe[title="streamlit_text_label.label_select"]');
            if (!labelIframe) return;

            // 等待iframe加载完成后注入样式
            labelIframe.addEventListener('load', function() {
                try {
                    const iframeDoc = labelIframe.contentDocument || labelIframe.contentWindow.document;
                    const styleEl = document.createElement('style');
                    // 自定义AntD按钮样式
                    styleEl.textContent = `
                        .ant-btn-primary {
                            background-color: orange !important;
                            border-color: orange !important;
                        }
                        .ant-btn {
                            background-color: violet !important;
                            border-color: violet !important;
                        }
                    `;
                    iframeDoc.head.appendChild(styleEl);
                } catch (err) {
                    console.error('修改iframe样式失败:', err);
                }
            });
        });
    </script>
    """, unsafe_allow_html=True
)

# 渲染标签选择组件
selections = label_select(body="lorem ipsum", labels=["Noun", "Verb"])
# 主页面测试按钮
st.button("test")

关键说明 #

1. 必须监听iframe的load事件：确保iframe内的AntD组件已经加载完成，样式注入才能生效。
2. 同源策略兼容：本地运行时，主页面与组件iframe同属localhost域名，不存在跨域限制，可正常访问iframe文档。
3. !important优先级：强制覆盖AntD的默认样式，避免样式被组件内部CSS覆盖。

内容的提问来源于stack exchange，提问作者M.Viking