Material-ui: Add examples of interoperability with styled-jsx to the docs

[fillipvt]

Hi!

Given that NextJS comes with styled-jsx by default and that MUI already has a pretty great example showcasing how to use MUI with NextJS I think it would be natural to have such type of example.

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

The thing I think would be most helpful to solve in examples would be:

• What is the best way to style MUI components with style-jsx?
  
  
  
  • Is the resolve tag the way to go?
  
  
  • Or is it a combination of makeStyles from MUI and the css tag from styled-jsx?
  
  
• I've been trying to do just that but I don't seem to be able to change styles for a Drawer for example.

Motivation 🔦

To be honest I've been having trouble myself trying to make things work between styled-jsx and MUI so having clear examples on how to do so would be incredibly helpful.

Thank you

[oliviertassinari]

Duplicate of #20776?

[fillipvt]

Hey @oliviertassinari thanks for chiming in!

I don't think it is a duplicate because the current issue discusses an addition to the docs. Perhaps in said example there will be the need to have <StylesProvider injectFirst> in order for it to work correctly. But as a whole #20776 would only be a part of the current issue.

What do you think?

[nilsmich]

Hi
I experiance the same trouble as fillipvt. I use next js and therefore style-jsx. Using resolve feels kind of wrong. I would also like to avoid to use makeStyles in some parts of the code and in others.

Is there a way to do something like this?

<>
   <Typography component="p" className="bla">text</Typography>
   <style jsx>{`
        .bla {
          background: red;
        }
   `}</style>
</>

Thank you

[oliviertassinari]

Closing for https://github.com/vercel/styled-jsx/issues/142