Components html - use own css

[andfanilo]

Hello @LostGoatOnHill , always nice to see users styling up their Streamlit page

@LostGoatOnHill

However my css is not picked up. Using chrome inspect tool then checking sources, I can’t see my css imported.

I got an untested hunch on this one, <link href="assets/css/test.css" rel="stylesheet"> being a relative path, it will be relative to Streamlit’s static installation folder and not your root project, so you will need to copy your CSS file to the folder or write an absolute path.

Check my answer there: Restrict Download of Images & Videos on Streamlit App - #2 by andfanilo

@LostGoatOnHill

is this still the preferred (only) way to use own css, by reading in the .css and writing the styles back out, and with using st.markdown rather than components.html

The difference is:

• components.html are mostly meant to bring new HTML/CSS widgets inside Streamlit, so the CSS you write in there will stay local to this component, here for example using components.html to render a static Material UI table: Custom Component: Material UI React Table - #3 by andfanilo
• st.markdown’s css hack will apply CSS styling globally to all Streamlit widgets (and page). It’s the unofficial way to style a Streamlit button or radio for example Can I change the color of the selectbox widget?

Hope this will unlock new styling powers
Fanilo