CSS won't render in deployed app (using components.html())

Custom Components
1

I am trying to render custom css in a deployed streamlit app. I have created a custom html table and am displaying it with components.html() (API reference here).

The thing is, I can get this css to render locally when in development by putting my css file in streamlit’s static folder on my computer and referencing it like so in my custom table html:

<link rel=“stylesheet” href=table_style.css” type=“text/css”/>

And it works just fine. I have finished my app and deployed it, changing the href to where the css file lives in my streamlit app’s repo:

<link rel=“stylesheet” href=assets/css/table_style.css” type=“text/css”/>

but no css was rendered. I also tried

main/assets/css/table_style.css

and then tried the full path

_user_/_repo_/main/assets/css/table_style.css

and using the raw link to the css file itself

https://raw.githubusercontent.com/_user_/_repo_/main/assets/css/table_style.css

yet the css doesn’t render when deployed with any of these attempts (I also tried putting the css file in the .streamlit folder in my repo where my config.toml lives, but I only tried that with the href of assets/css/style.css and things kinda went wonky - my theme colors didn’t display either - so I didn’t try the other paths). There has to be a way to get this css referenced when in production… here is an example of someone with a very similar problem. I’ve tried every option I could think of in trying to get my custom css rendered when deployed but nothing seems to work. Help would be greatly appreciated, as I spent a lot of time working on and designing my app around this css, and it would basically be useless if it can’t be rendered in deployment (which I don’t know why it wouldn’t be able to). Thanks!

EDIT: I finally found an answer for this! This link has the solution. Basically, you move the css file to the hosted streamlit’s static file, like so:

STREAMLIT_STATIC_PATH = Path(st.__path__[0]) / 'static'
CSS_PATH = (STREAMLIT_STATIC_PATH / "assets/css")
if not CSS_PATH.is_dir():
    CSS_PATH.mkdir()

css_file = CSS_PATH / "table_style.css"
if not css_file.exists():
    shutil.copy("assets/css/table_style.css", css_file)

and then the html tag would be

<link rel="stylesheet" href="assets/css/table_style.css" type="text/css"/>

Since the Streamlit server loads static assets from the static folder of where it is is installed.

3 Likes