React based styled-components in thymeleaf


We are wondering if there is any way to include react based styled-components in thymeleaf?
If not, is this something that is possible to create support for in a future version of XP?

The problem we are having is that we want to output styled-components from our design system and integrate it into XP using an npm lib, so that we can just call a component we need in thymeleaf and that component is then rendered on the site. (with the option to edit components text fields in the content editor)

The benefits to using styled-components is that it will always keep your components up to date with any style guide/ -system without lots of manual operations. There is noe class name conflicts, removing a component will also remove any connected styling, no more clean up jobs. All styling is within the component, so no more searching for other classes that might affect the component you are working on.

This is why we want to use styled-components, but as we see it, there is no viable way to implement it into XP as it is today.

So is this something you could consider implementing support for?

-Erik / SSB

Did you try this?

We are working to provide end-to-end support for react in XP, so you will not have to use thymeleaf at all. This should all be live this year!