Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Improve Style Library Interoperability #19457

Merged

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Jan 28, 2020

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.

Capture d’écran 2020-01-28 à 21 37 56

  • 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.

Capture d’écran 2020-01-28 à 21 37 40

  • 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.

Capture d’écran 2020-01-28 à 21 38 23

  • 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 😍 !

@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation label Jan 28, 2020
@mui-pr-bot
Copy link

mui-pr-bot commented Jan 28, 2020

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

Generated by 🚫 dangerJS against 92473e2

@mbrookes
Copy link
Member

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
Copy link
Member

mbrookes commented Jan 28, 2020

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
Copy link
Member Author

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?

@oliviertassinari oliviertassinari merged commit 95d9c78 into mui:master Jan 30, 2020
@oliviertassinari oliviertassinari deleted the docs-style-interoperability branch February 8, 2020 20:39
EsoterikStare pushed a commit to EsoterikStare/material-ui that referenced this pull request Feb 13, 2020
@johnwils
Copy link

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
Copy link
Member Author

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

@johnwils
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants