[studio] Unable to load styled-components styles in canvas

[Mil4n0r]

Steps to reproduce

Link to live example: (required)

Steps:

1. Use a mui-toolpad version equal or higher than 0.1.54
2. Add a custom component from another library that uses styled-components to toolpadComponents.tsx, ComponentCatalogItem and toolpad-studio-components/src (using createBuiltin).
3. Launch toolpad-studio in dev mode:

pnpm run dev
pnpm toolpad-studio dev toolpad-studio --dev

4. When in Canvas mode, the custom component will be displayed as a default HTML element. However, when going into the preview, it will display properly.

Current behavior

The custom component is displayed with no styles in the canvas.

Expected behavior

I would expect the custom component to be displayed in the canvas with the proper styles.

Context

This happens after the change that made EXPERIMENTAL_INLINE_CANVAS be the default behavior. I am not entirely sure what it changes. #3370. In previous versions it loaded as expected.

I wonder if there is any known workaround to make custom components that use styled-components to load their styles as expected.

Your environment

npx @mui/envinfo

System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.3.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.8 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (123.0.2420.97) 
  npmPackages:
    @mui/internal-docs-utils: 1.0.7 => 1.0.7 
    @mui/internal-markdown: 1.0.4 => 1.0.4 
    @mui/internal-scripts: 1.0.8 => 1.0.8 
    @mui/monorepo: github:mui/material-ui#a3fdc9f9682b57a6059792634863e39f322cef8d => 6.0.0-alpha.8 
    @mui/x-charts: 7.6.1 => 7.6.1 
    typescript: 5.4.5 => 5.4.5 

Search keywords: styled-components canvas