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] Add Emotion to style interoperability guide #12966

Merged

Conversation

lukePeavey
Copy link
Contributor

@lukePeavey lukePeavey commented Sep 22, 2018

Closes #12054

I added an additional Emotion example to demonstrate overriding styles with classes prop.

Just let me know if there is anything you want me to change

Here are the links to demos, if you want to fork to them your account I'll update the links.

Emotion - Overriding styles with classes prop
React Emotion

Copy link
Member

@mbrookes mbrookes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔎

export default ReactEmotionButton;
```

[![Edit Material UI - React Emotion Button ](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/nkx4p8rw9l)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Button ]

Extra space?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll fix that

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, should I change the titles of the sandbox demos to be more consistent with other examples?

-Material UI - React Emotion Button
+React Emotion Button

@@ -277,7 +274,7 @@ const StyledButton = styled(Button)`
color: white;
height: 48px;
padding: 0 30px;
box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
box-shadow: 0 3px 5px 2 px rgba(255, 105, 135, 0.3);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll fix this one too.

@mbrookes
Copy link
Member

@lukePeavey thanks! Just holding for @oliviertassinari 's review.

@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation label Sep 23, 2018
@oliviertassinari oliviertassinari merged commit 3204104 into mui:master Sep 23, 2018
@oliviertassinari
Copy link
Member

@lukePeavey Good job! I will keep an eye on the usage count of Codesandbox to sort the demos.

@lukePeavey
Copy link
Contributor Author

Sounds good!

marcelpanse pushed a commit to marcelpanse/material-ui that referenced this pull request Oct 2, 2018
* [docs] Add Emotion to style interoperability guide

* Add note on controlling priority to React Emotion section

* Remove extra spaces

* let's merge
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.

3 participants