Streamlit 所有按钮都一样答案

【问题标题】：Streamlit all buttons are the sameStreamlit 所有按钮都一样
【发布时间】：2022-10-18 07:08:40
【问题描述】：

import streamlit as st
import base64

def custom_button(text='button', bgpng=None, height='height: 225px;', width='width: 225px'):
    with open (bgpng, 'rb') as img:
        convert_img = base64.b64encode(img.read()).decode('utf-8')
    background_img = f"background-image: url('data:image/png;base64, {convert_img}');"
    
    st.markdown(f"""
    <style>
    div.stButton > button:first-child {{
        {background_img}
        {height}
        {width}
    }}
    </style>""", unsafe_allow_html=True)
    button = st.button(text)
    return button

button1 = custom_button(text='button', bgpng=r'data\pic1.png')
button2 = custom_button(text='button2', bgpng=r'data\pic2.png')

问题如下，最后一个按钮总是决定其他按钮的属性，在这种情况下是背景图片按钮2确定背景图片按钮1.所以所有按钮都有相同的背景图像。我该如何解决？

【问题讨论】：

标签： python css streamlit

【解决方案1】：

您为 x 按钮创建 x 样式，因此应用最后一个样式，因为它具有相同的优先级。

我不使用python，但我想你可以为你的按钮设置一个id并将你的样式应用到#{button_id}（或类似的东西），或者应用如下的内联样式：

<button style="background-color:orange;">button</button>
<button style="background-color:grey;">button2</button>

【讨论】：

【解决方案2】：

我找到了解决方案。如果 streamlit 代码准备好了，在浏览器中，右键单击，检查，复制 css 选择器，然后我们得到唯一的按钮 css 选择器。我们需要替换这段代码： "div.stButton > 按钮：第一个孩子" 应替换为："复制的 CSS 选择器"

【讨论】：