Experiments with styling and layout hacks

Hi all, after adding yet-another-css-hack to an app, I decided to just give up and see if I could make Streamlit bend to my will by changing the source. The PR below adds support for injecting CSS class names into st.container. This allows styling a specific Streamlit widget instance, rather than all the hacks that are floating around.

Example:

with st.container(css_classes=["big", "red"]):
    st.text("We don't talk about B***o")

The screenshot below shows styled borders, horizontal button layout, FontAwesome icons (obviously Streamlit apps need more :rainbow:)

PR: Enable more maintainable frontend styling hacks by kung-foo · Pull Request #4591 · streamlit/streamlit · GitHub

This probably won’t be merged, but it was a fun hackathon project (and we are using it internally, and will probably continue to do so, even it means maintaining the fork).

Enjoy,
Jonathan

2 Likes

Hey @kung-foo, welcome to the Streamlit Community!

Thanks for demonstrating how this might work within Streamlit! I wouldn’t say that it won’t be merged, just that a change like this needs some careful thought from our product team.

Best,
Randy