Importing custom css

[ChrisJefferson]

Is it possible to import custom css?

anywidget lets you set _css, but (as far as I can tell), setting that to a file doesn't seem to do anything?

I wanted to check if isn't supported, or isn't documented (and I'm possibly using it wrong..)

[kolibril13]

Currently, you can do styling of widgets like mentioned in this walkthrough guide https://widgetti.github.io/ipyreact/lab/?path=full_tutorial.ipynb like this

from IPython.display import HTML , display
from pathlib import Path
css_rules = Path('styles_orange.css').read_text()
display(HTML('<style>' + css_rules + '</style>'))

But yes, a _css option would be amazing, here was a conversation about that: https://github.com/widgetti/ipyreact/pull/3#issuecomment-1520490470

[maartenbreddels]

Indeed, this is not supported yet, we'd need to do something like in https://github.com/manzt/anywidget/blame/main/packages/anywidget/src/widget.js

Happy to guide someone through a PR and get this in, but I currently don't have the bandwidth to do it myself.

[maartenbreddels]

I do not think that should not be part of the same widget (I disagree with anywidget in that respect), you can also use https://solara.dev/api/style

But we could think about adding a simple Style widget in ipyreact.

[sirwhinesalot]

If all you care about is bundling the .css of your widget alongside it, you can use the SASS plugin of ESBuild to shove it into the .js file (it works with regular CSS too). Just make sure to import the .css somewhere in your javascript code.

plugins: [sassPlugin({type: 'style'})]

[maartenbreddels]

Nice, thanks!