search

mui / mui-toolpad

Toolpad: Full stack components and low-code builder for dashboards and internal apps.
https://mui.com/toolpad/
MIT License
955 stars 241 forks source link

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

Open Mil4n0r opened 3 months ago

Mil4n0r commented 3 months ago

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

Janpot commented 3 months ago
  1. Add a custom component from another library that uses styled-components to toolpadComponents.tsx, ComponentCatalogItem and toolpad-studio-components/src (using createBuiltin).

Am I understanding correctly that you are using a fork of Toolpad and are trying to add components in the builtin library?

Mil4n0r commented 3 months ago

Am I understanding correctly that you are using a fork of Toolpad and are trying to add components in the builtin library?

That is correct.

Janpot commented 3 months ago

If you want you can open a PR with some minimal changes that demonstrate the problem. But I have to admit, this is not immediately a use case we're investing in. I might take a quick look, but you may have to do some debugging on this yourself.