Adding CSS styling to st.data_editor() widget

Custom Components
,
1

Hi!

I have seen a few posts on this topic but none seem to be addressing the issues I am having. I currently have a relatively simple Streamlit app which performs calculations given a set of input data.

I have a few pages which render the data in the form of tables. Essentially I query my SQLite DB, returning and then rendering the resulting data using st.data_editor().

I have added a general color style to the app using my company’s color scheme. Let’s say for simplicity that my background color for the page is green. The issue I am running into is that I want the background of my table to be different than the background of the page. However, I cannot seem to be able to modify the color attributes of the data editor.

I have tried the following:

 # Fetch data
    data_from_sql = DBReader().read_sql(table_name)
    # CSS styling
    st.markdown("""
        <style>
        div.stDataFrameGlideDataEditor {
            --gdg-text-dark: red !important;
            --gdg-bg-cell: orange !important;
            --gdg-bg-header: orange !important;
        }
        </style>
        """, unsafe_allow_html=True)
    # Editable table
    editable_data = st.data_editor(data_from_sql, num_rows="dynamic")

When I inspect the rendered HTML in the console, I see that I have added a new style element containing my attributes, but they are shown as crossed-out and unused.

Any suggestions?

PS: I have seen the posts that describe directly styling the dataframe instead of adding CSS elements- however I need my data to be editable so this solution does not work for me.