[Python] Editing Streamlit component through CSS

I want to edit st.pills component using third party library, which is styleable container. I feel like it is way easier to edit the component through styleable container rather than through markdown streamlit, although I have tried using streamlit markdown to edit the CSS, or using different files of CSS through this code

with open('css/style.css') as f:
st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html = True)


but all of three methods is fail to change the st.pills component. Here is latest my code

import streamlit as st
import plotly.graph_objects as go
from streamlit_extras.stylable_container import stylable_container

options = ['Android', 'iOS']

with stylable_container(
key="pill_platform",
css_styles="""
z-index: 999;
position: relative;
border: 1px solid #000
"""
):
selection = st.pills('', options, selection_mode='single', default=options[0], label_visibility='hidden')


Does anyone here know how to edit that component via CSS? especially for the z-index one, I need it because I want that st.pills in front of the plotly plot. Thanks!



Continue reading...