Does IDOM support CSS modules?

[Archmonger]

I was reading up about React and was wondering if IDOM has an integrated way of implementing CSS modules.

ex) https://www.w3schools.com/react/react_css.asp

[rmorshea]

You can add style to elements in two ways:

1. with a style tag element
2. using the style prop (as in React)

# style element (write a CSS string)
html.style(".some-css {...}")

# define style the same as React with a camelCased dict
html.div({"style": {"backgroundColor": "red"})

[jgburford]

Can style be updated with hooked variables?

For example:

bgstate, set_bgstate = idom.hooks.use_state("red")

html.div({"style": {"backgroundColor": bgstate})

I've tried this and can't get it to work. It will start red but when calling set_bgstate() it doesn't change.

Any tips?

[rmorshea]

Yup that's a bug. That's probably also why the snake game from the examples is broken right now too.

[rmorshea]

Tracking it here: #480

[rmorshea]

@jgburford without that little hint it would have taken me ages to debug the underlying issue. Thanks! 🙏

[jgburford]

@rmorshea glad I could be of some help!

[Archmonger]

I don't think it's technologically possible for IDOM to have scoped CSS, such as with css-modules.

The only viable solution is inline styles, as mentioned above