How to add components defined with styled components to grapesjs ?

[amarpendhari7]

Hello,

We are trying to add grapejs to our existing nextJS project in which styled components is used for styling and for theme management so the components are defined in styled components.
For now we are able to add components to canvas el also style them by passing styles links inside canvas.styles
But how can we add components that are already defined in styled components ?

Error when we use styled component in grapesjs without Theme wrapper

styled component in grapesjs with Theme wrapper - https://styled-components.com/docs/advanced (incase you are not familiar with styled theme wrapper)
renders html output without throwing any error styled css not etting applied

So basically the end result should be that if we try to use a component defined with styled component it should render as its was designed or styled

After searching on this topic was not able to find any solution so posted here.
Any help or suggestions are welcomed
Thanks in advance