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.

Sign up for GitHub

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

Jump to bottom

[docs] Document that @material-ui/styles is not strict mode compatible #27639

Merged
merged 3 commits into from
Aug 12, 2021
Merged

[docs] Document that @material-ui/styles is not strict mode compatible #27639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c9e762b
[docs] Document that @material-ui/styles is not strict mode friendly
oliviertassinari Aug 7, 2021
ec118ff
React 18
oliviertassinari Aug 9, 2021
4112072
revert to the existing wordings, no need to change it
oliviertassinari Aug 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/src/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@ const pages: readonly MuiPage[] = [
},
{
pathname: '/styles',
title: 'Styles (legacy)',
children: [
{ pathname: '/styles/basics' },
{ pathname: '/styles/advanced' },
Expand Down
9 changes: 7 additions & 2 deletions docs/src/pages/styles/basics/basics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
# @material-ui/styles

<p class="description">You can use Material-UI's styling solution in your app, whether or not you are using Material-UI components.</p>
<p class="description">The legacy styling solution of Material-UI.</p>

> **Note**: `@material-ui/styles` is the _**legacy**_ styling solution for Material-UI. It is deprecated in v5. It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@material-ui/core` anymore. If you don't want to have both emotion & JSS in your bundle, please refer to the [`@material-ui/system`](/system/basics/) documentation which is the recommended alternative.
> ⚠️ `@material-ui/styles` is the _**legacy**_ styling solution for Material-UI.
> It is deprecated in v5.
> It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@material-ui/core` anymore.
> If you don't want to have both emotion & JSS in your bundle, please refer to the [`@material-ui/system`](/system/basics/) documentation which is the recommended alternative.
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
> If you don't want to have both emotion & JSS in your bundle, please refer to the [`@material-ui/system`](/system/basics/) documentation which is the recommended alternative.
> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@material-ui/system`](/system/basics/) documentation which is the recommended alternative.

Copy link
Member Author

Choose a reason for hiding this comment

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

@Andarist how would you wish https://github.com/emotion-js/emotion to be referenced in the documentation of Material-UI?

We have used "emotion" so far, but maybe we shouldn't have. For instance, https://emotion.sh/docs/introduction

Capture d’écran 2021-08-09 à 23 58 00

https://emotion.sh/docs/css-prop

Capture d’écran 2021-08-09 à 23 59 14

Copy link
Contributor

Choose a reason for hiding this comment

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

I think Emotion is fine - it makes it more obvious that it's the name of something (like a library). I probably should unify this across the docs.

Copy link
Contributor

Choose a reason for hiding this comment

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

Gonna confirm with other maintainers to see what they prefer since they were choosing the name in the past ;p


> ⚠️ `@material-ui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18.

Material-UI aims to provide a strong foundation for building dynamic UIs.
For the sake of simplicity, **we expose the styling solution used in Material-UI components** as the `@material-ui/styles` package.
Expand Down
2 changes: 1 addition & 1 deletion docs/translations/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@
"/guides/content-security-policy": "Content Security Policy",
"/guides/right-to-left": "Right-to-left",
"/guides/flow": "Flow",
"/styles": "Styles",
"/styles": "Styles (legacy)",
"/styles/basics": "Basics",
"/styles/advanced": "Advanced",
"https://material-ui.com/store/": "Premium themes",
Expand Down