[docs] Improve Style Library Interoperability

[oliviertassinari]

I have tried to improve our style interoperability guide. Here are a couple of leverages I have explored:

• Update the customization style to be shorted and yet more appealing, it's based on Stripe.

• Encourage the usage of the CodeSandbox edit button, this will further help us evaluate how much popular is CSS vs styled-components vs emotion vs Global CSS vs CSS modules. Reset all the codesandbox stats counters to 0.

• Treat each section as more independent, this means duplicating more content between them.
• Encourage using a single theme object, better illustrate how to use Material-UI's theme with styled-components.

• Put more emphasis on controlling the priority, it's really important.
• Go in more detail on how to style nested elements.
• Use CRA instead of Parcel for codesandbox
• Remove react-jss from the list, the example is broken, and given downloads are going down: https://npm-stat.com/charts.html?package=react-jss, I would rather not invest time on fixing it now. However, for v5, it will be important.

Stuff we should cover later on: How to use the theme object with SASS and CSS modules? https://github.com/MadLittleMods/postcss-css-variables#preserveinjectedvariables-default-true

---

I can't wait for Material-UI supporting styled-components and emotion, it's going to be awesome 😍 !

[mui-pr-bot]

No bundle size changes comparing 5c84559...92473e2

Generated by 🚫 dangerJS against 92473e2

[mbrookes]

diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md
index 825a80439..00691ab0b 100644
--- a/docs/src/pages/guides/interoperability/interoperability.md
+++ b/docs/src/pages/guides/interoperability/interoperability.md
@@ -15,7 +15,7 @@ There are examples for the following styling solutions:
 
 ## Plain CSS
 
-Nothing fancy, plain old CSS.
+Nothing fancy, just plain old CSS.
 
 **PlainCssButton.css**
 ```css

Not sure why someone would have chosen to break the grammar. 😉

(But you could drop "old" if it's too colloquial.)

[mbrookes]

One concern with the new customization example is that it looks very similar to a standard contained button. I don't have a good suggestion for an alternative though, sorry.

[oliviertassinari]

Not sure why someone would have chosen to break the grammar.

@mbrookes Thanks, I have added just and removed old.

One concern with the new customization example is that it looks very similar to a standard contained button. I don't have a good suggestion for an alternative though, sorry.

I haven't thought about it. What if we could consider the button is an excuse to cover the interoperability material?

[johnwils]

When this was merged it erased the React JSS section at the bottom of the page. The React JSS link is still at the top, but it clicking it links/navigates to nowhere. Was this on purpose or a mistake maybe?

Here is the live page:
https://material-ui.com/guides/interoperability/

[oliviertassinari]

@johnwils The example wasn't working correctly. However, I think that we should introduce it back. Do you want to work on it? :)

[johnwils]

@oliviertassinari oh. i reread the top comment and missed this part:

Remove react-jss from the list, the example is broken, and given stats are going down: https://npm-stat.com/charts.html?package=react-jss, I would rather not invest time on fixing it.

sorry i don’t have time atm. But have a question :-)

Does the stars going down.. reflect on the future of material-ui api makeStyles? It uses react-jss.

curious if @material-ui/styles may move in another direction or stick to makeStyles in future versions