如何修改Streamlit组件（切换按钮）的文本颜色？

你想把Streamlit应用里切换按钮的<p>Add Treatment Dates</p>文本改成白色，但之前尝试的几种CSS样式都没生效，下面给你可行的解决思路：

方法一：强制覆盖样式（最简单有效） #

直接给样式加上!important，强制覆盖Streamlit的默认样式，同时精准定位到p标签：

st.markdown("""
<style>
[data-testid="stWidgetLabel"] p {
    color: white !important;
    background-color: #111;
}
</style>
""", unsafe_allow_html=True)

方法二：精准定位组件容器 #

如果上面的方法还是不行，就针对切换按钮的具体组件类型（st.toggle或st.checkbox）来写选择器，避免影响其他组件：

st.markdown("""
<style>
/* 针对st.toggle组件的标签 */
[data-testid="stToggle"] [data-testid="stWidgetLabel"] p {
    color: white !important;
    background-color: #111;
}
/* 如果是st.checkbox组件，用这个选择器 */
[data-testid="stCheckbox"] [data-testid="stWidgetLabel"] p {
    color: white !important;
    background-color: #111;
}
</style>
""", unsafe_allow_html=True)

之前代码失效的原因 #

1. Streamlit自带的默认样式优先级比你写的高，需要用!important强制覆盖
2. 选择器不够精准，没有匹配到嵌套在组件内部的p标签

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