[Docs] - Styled-components examples in docs are using Emotion

[amjadorfali]

Duplicates

• [X] I have searched the existing issues

Related page

https://mui.com/material-ui/guides/interoperability/#styled-components

Kind of issue

Broken demonstration

Issue description

I was looking for examples of using Styled components instead of emotion in MUI 5. Although the first Edit in code sandbox is working properly and has SC in dependencies, it appears that all the other examples are done in emotion

This one is working (Edit in code sandbox)

When opening any 1 of those 3 (Clicking edit in code sandbox), it shows the example using Emotion, where it should be using styled-components

1- Deeper Elements

2- Theme

3- Portals

I know essentially the differences between the 2 are very minor, but because i've been to multiple hoops to integrate SC with MUI v5, i want to make it easier for future migrations

If you guys think this an issue and needs fixing, i'd be happy to work on it

Context 🔦

Trying to fix examples i guess for future readers, as those are the only styled-components examples provided (i assume)

[amjadorfali]

Just a note, i know both of them will be using the exact same syntax, but it's just about having different dependencies and using the alias/resolutions fields in package.json

[mnajdova]

Thanks for the feedback, the idea was that once you set it up, we can show the code with the additional changes, but we have the codesandbox link on each demo so this may be confusing, agree. We should follow the same way of how they are displayed as the first demo. @samuelsycamore would you like to tackle this?

[samuelsycamore]

Sure thing! I've been meaning to edit and revise this whole doc for awhile now, so I'll add it to the list. 👍

[amjadorfali]

Thank you! If i can help with anything in this library i'd be more than happy. I am new to open source contributions, so I'm struggling to find a first good task😅

[samuelsycamore]

@amjadorfali if you'd like to tackle the specific issue here, please feel free! I can circle back around with a bigger content revision for this doc later.

[amjadorfali]

@samuelsycamore Thank you ! I will handle it ASAP

[samuelsycamore]

Excellent! You can tag me as a reviewer on the PR when you're ready!

[amjadorfali]

@mnajdova @samuelsycamore

💡 Brainstorming and debugging

Problem

Generating code-sandbox is does not generate proper dependency configuration for styled-components (Not sure if there’s others, as it’s a reusable component <DemotTooltip/>)

Possible Solution

Fix logic in :

docs/src/modules/sandbox/CodeSandbox.ts
docs/src/modules/sandbox/StackBlitz.ts

To generate proper sandbox for styled component docs

How ?

• Introduce a new property to set additional config on package.json
• Affected Files :
  • Demo.js
  • DemoToolbar.js
    • docs/src/modules/components/MarkdownDocs.js
    • docs/src/modules/components/MarkdownElementV2.js

Findings

🤔 Need to figure out a way to pass in custom config to the props

• Needed special handling for :
  • StyledComponentsPortal.tsx/.js
  • StyledComponentsTheme.tsx/.js
  • StyledComponentsDeep.tsx/.js

For the above components, need a way to pass props to parent components

Component ⇒ interoperability.js ⇒ MarkdownDocs.js ⇒ Demo.js ⇒ DemoToolbar.js ⇒

• codeSandbox.createReactApp
• stackBlitz.createReactApp

Need to pass custom props to the above functions in order to add more options to package.json

Props will be used in the following files :

• CodeSandbox.ts - **And respective helpers if needed**
• StackBlitz - **And respective helpers if needed**

Props will be used to add a Record<string, string> to the package.json, in order to add custom properties

❓ How do I provide “Special Handling” for those 3 components ?

• I don’t have an answer here

What’s next ?

As i’m not sure the solution i’m providing is the proper way to go, there could be something i’m missing out on; I’d love to hear your take on this

[samuelsycamore]

Thanks for digging deeper into this @amjadorfali! I think we should call in @mui/docs-infra here to see what they think :)

[mnajdova]

🤔 Need to figure out a way to pass in custom config to the props Needed special handling for : StyledComponentsPortal.tsx/.js StyledComponentsTheme.tsx/.js StyledComponentsDeep.tsx/.js

You can do something like:

{{"demo": "StyledComponentsPortal.js", "useStyledEngineSc": true}}

Get this prop from demoOptions inside the <Demo /> component and then you can propagate it to the Sandbox and Stackblitz components.

[amjadorfali]

Hey everyone @mnajdova @samuelsycamore , sorry for being late on this, i had a very busy week and i just started working on it tonight.

Uspide ⏫

• I managed to fix the issue using the solution that @mnajdova provided!
• I setup all the reusable code, and made all the required changes needed to fix this issue

Downside 🙃

• I couldn't manage to send "alias" config (YET) to slackblitz ( Thoughts ? )
  • Weirdly enough, slackblitz works with JS and TS demos, with styled components, flawlessly
• I managed to send "alias" config to codesandbox
  • Weirdly enough, it's throwing an error that it's expecting @emotion/styled & @emotion/react as dependencies

I need to dive more into how codesandbox works, and know why slackblitz just works (with or without the alias, tried it)

If you got any ideas on this please let me know 🙏🏼

Notes :

In the style engine guide, it mentions using resolutions (also differs between yarn / Npm ...)

So i got a bit lost as the "Working sandbox" , uses alias

[amjadorfali]

I am kinda stuck on this part, i will do some cleanups and push my current changes, to see if anyone can help with this issue

One thing to note : Codesandbox did workout eventually, but only when changing the Sandbox.config to vanilla instead of create-react-app (I changed it directly in the sandbox, as in the code i didn't find where to configure it)

For stackblitz as i mentioned, it's working, although it throws a warning about missing peer dependencies at the beginning.