[docs][material-ui] Revise and split up "Styled engine" doc #37774

samuelsycamore · 2023-07-01T23:38:59Z

This PR was initially created to address feedback about a typo on this page. I've been meaning to revise this doc for awhile now so this seemed like as good a time as any.

The original title "Styled engine" doesn't really tell the reader anything about the page's contents. The way I see it, the current version of the doc actually covers two different topics:

how to use styled-components instead of Emotion
how to use multiple styling solutions in a single project

As such, I'm proposing that we split this into two docs:

Using styled-components https://deploy-preview-37774--material-ui.netlify.app/material-ui/guides/styled-components/
Theme scoping https://deploy-preview-37774--material-ui.netlify.app/material-ui/guides/theme-scoping/

Beyond that, the changes here are mostly about copyediting.

mui-bot · 2023-07-01T23:41:32Z

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 12b1246

oliviertassinari

https://deploy-preview-37774--material-ui.netlify.app/material-ui/guides/multiple-styling-solutions/ feels like it cover the same content as https://deploy-preview-37774--material-ui.netlify.app/material-ui/guides/interoperability/, at least from the title.

We could rename "Working with multiple styling solutions" to be specific about Emotion, or move the content of the page to be under https://deploy-preview-37774--material-ui.netlify.app/material-ui/guides/interoperability/#emotion.

samuelsycamore · 2023-08-03T19:51:15Z

@oliviertassinari hmm yeah that's a good point. The Interoperability doc needs heavy revisions as well (#38147), so I'll move this "multiple styling solutions" content over there for now, and we can come back to that doc in a future PR.

oliviertassinari · 2023-08-03T19:55:42Z

@samuelsycamore Another idea, what if instead, we were renaming the page "Theme scoping"? We have no other documentation about it. And in the style interoperability page, we could link it. It actually both covers Emotion and Styled-components.

samuelsycamore · 2023-08-03T20:04:41Z

@oliviertassinari good call, I'll go with that—the Interoperability doc is already longer than we'd prefer (with a scrollbar in the table of contents).

oliviertassinari · 2023-08-13T18:02:43Z

packages/mui-styled-engine/package.json

@@ -20,7 +20,7 @@
  "bugs": {
    "url": "https://github.com/mui/material-ui/issues"
  },
-  "homepage": "https://mui.com/material-ui/guides/styled-engine/",
+  "homepage": "https://mui.com/material-ui/guides/styled-components/",


This link is wrong. The closest I can find is:

Suggested change

"homepage": "https://mui.com/material-ui/guides/styled-components/",

"homepage": "https://mui.com/system/getting-started/",

It's still wrong but the best I can find.

Same above

@oliviertassinari Is there a use case for the styled-engine package other than swapping out Emotion for styled-components? It seems like the styled-components guide would still be the best place to direct a user who needs to know about this topic.

The other use case is to:

use its exported modules, the theme context, styled, global styles, etc. It's not a straight re-export of emotion. I think a lot more frequent that styled components swap.

swapping for other style engines, but this was never implemented

oliviertassinari · 2023-08-14T00:12:49Z

README.md

@@ -112,7 +112,7 @@ npm install @mui/material @mui/styled-engine-sc styled-components
 yarn add @mui/material @mui/styled-engine-sc styled-components
 ```

-Visit our [`styled-engine` guide](https://mui.com/material-ui/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
+Visit our [styled-components guide](https://mui.com/material-ui/guides/styled-components/) for more information on configuration.


I think that the true location of this guide should be here:

Suggested change

Visit our [styled-components guide](https://mui.com/material-ui/guides/styled-components/) for more information on configuration.

Visit our [styled-components guide](https://mui.com/system/guides/styled-components/) for more information on configuration.

But we could say it's beyond the scope of this PR.

oliviertassinari · 2023-08-14T00:15:21Z

docs/data/material/guides/styled-components/styled-components.md

+const withTM = require('next-transpile-modules')([
+  '@mui/material',
+  '@mui/system',
+  '@mui/icons-material', // If @mui/icons-material is being used
+]);


This is outdated docs AFAIK https://github.com/martpie/next-transpile-modules/releases/tag/the-end

Added to https://www.notion.so/mui-org/Outdated-next-transpile-modules-docs-68f13f7fa6884ca0a2ae210efbc327c3, for a later point in time.

docs/data/material/guides/styled-components/styled-components.md

docs/data/material/guides/theme-scoping/theme-scoping.md

Co-authored-by: Olivier Tassinari <[email protected]> Signed-off-by: Sam Sycamore <[email protected]>

README.md

Co-authored-by: Brijesh Bittu <[email protected]> Signed-off-by: Sam Sycamore <[email protected]>

danilo-leal

Reads clearly to me! 🤙

Signed-off-by: Sam Sycamore <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]> Co-authored-by: Brijesh Bittu <[email protected]>

split page, rename, some copy edits

96d7dcb

samuelsycamore added docs Improvements or additions to the documentation package: material-ui Specific to @mui/material labels Jul 1, 2023

samuelsycamore mentioned this pull request Jul 1, 2023

[system] Introduce theme scope for using multiple design systems #36664

Merged

4 tasks

styled components copy edits

96e9ab2

mj12albert mentioned this pull request Jul 25, 2023

Can't get external CSS file to modify MUI components #38142

Closed

2 tasks

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 1, 2023

samuelsycamore added 2 commits August 3, 2023 11:49

merge master

4068285

merge master, prettier

2255bcd

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 3, 2023

samuelsycamore added 5 commits August 3, 2023 12:08

updated links

fc2b4c4

clarifying packages

2e7bfd7

punctuation

b7b440d

multiple styling solutions copyediting

ccc2f6e

i18n

549bfb4

samuelsycamore marked this pull request as ready for review August 3, 2023 17:42

samuelsycamore requested review from oliviertassinari, mj12albert, siriwatknp and danilo-leal August 3, 2023 17:43

oliviertassinari reviewed Aug 3, 2023

View reviewed changes

samuelsycamore added 2 commits August 3, 2023 14:55

couple more copy edits

f9981f0

links

f0dd4a3

samuelsycamore added 3 commits August 3, 2023 15:09

theme scoping doc

7af2f96

theme-scoping.js

3100e2f

i18n

ee472dc

samuelsycamore requested a review from siriwatknp August 9, 2023 19:00

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 9, 2023

update

4e21600

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 9, 2023

oliviertassinari reviewed Aug 14, 2023

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 15, 2023

samuelsycamore and others added 2 commits August 17, 2023 14:56

Apply suggestions from code review

1eb501c

Co-authored-by: Olivier Tassinari <[email protected]> Signed-off-by: Sam Sycamore <[email protected]>

merge conflict

bc2c548

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 17, 2023

oliviertassinari requested review from brijeshb42 and removed request for mj12albert and siriwatknp August 17, 2023 20:38

brijeshb42 reviewed Aug 18, 2023

View reviewed changes

README.md Outdated Show resolved Hide resolved

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 29, 2023

samuelsycamore and others added 2 commits September 1, 2023 16:42

Update README.md

2692cd4

Co-authored-by: Brijesh Bittu <[email protected]> Signed-off-by: Sam Sycamore <[email protected]>

merge master

d46ebf6

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 1, 2023

samuelsycamore requested a review from brijeshb42 September 1, 2023 21:44

prettier

0bc3a98

samuelsycamore changed the title ~~[docs] Revise and split up Material UI "Styled engine" doc~~ [docs][material-ui] Revise and split up "Styled engine" doc Sep 1, 2023

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 3, 2023

merge master

12b1246

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 5, 2023

samuelsycamore requested a review from danilo-leal September 5, 2023 17:32

danilo-leal approved these changes Sep 5, 2023

View reviewed changes

samuelsycamore merged commit e9bd183 into mui:master Sep 5, 2023

samuelsycamore deleted the styled-engine branch April 3, 2024 17:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs][material-ui] Revise and split up "Styled engine" doc #37774

[docs][material-ui] Revise and split up "Styled engine" doc #37774

samuelsycamore commented Jul 1, 2023 •

edited

Loading

mui-bot commented Jul 1, 2023 •

edited

Loading

oliviertassinari left a comment •

edited

Loading

samuelsycamore commented Aug 3, 2023

oliviertassinari commented Aug 3, 2023 •

edited

Loading

samuelsycamore commented Aug 3, 2023

oliviertassinari Aug 13, 2023 •

edited

Loading

samuelsycamore Aug 17, 2023

oliviertassinari Aug 17, 2023 •

edited

Loading

oliviertassinari Aug 14, 2023

oliviertassinari Aug 14, 2023 •

edited

Loading

oliviertassinari Aug 17, 2023

danilo-leal left a comment

	"homepage": "https://mui.com/material-ui/guides/styled-components/",
	"homepage": "https://mui.com/system/getting-started/",

	Visit our [styled-components guide](https://mui.com/material-ui/guides/styled-components/) for more information on configuration.
	Visit our [styled-components guide](https://mui.com/system/guides/styled-components/) for more information on configuration.

[docs][material-ui] Revise and split up "Styled engine" doc #37774

[docs][material-ui] Revise and split up "Styled engine" doc #37774

Conversation

samuelsycamore commented Jul 1, 2023 • edited Loading

mui-bot commented Jul 1, 2023 • edited Loading

Netlify deploy preview

Bundle size report

oliviertassinari left a comment • edited Loading

Choose a reason for hiding this comment

samuelsycamore commented Aug 3, 2023

oliviertassinari commented Aug 3, 2023 • edited Loading

samuelsycamore commented Aug 3, 2023

oliviertassinari Aug 13, 2023 • edited Loading

Choose a reason for hiding this comment

samuelsycamore Aug 17, 2023

Choose a reason for hiding this comment

oliviertassinari Aug 17, 2023 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Aug 14, 2023

Choose a reason for hiding this comment

oliviertassinari Aug 14, 2023 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Aug 17, 2023

Choose a reason for hiding this comment

danilo-leal left a comment

Choose a reason for hiding this comment

samuelsycamore commented Jul 1, 2023 •

edited

Loading

mui-bot commented Jul 1, 2023 •

edited

Loading

oliviertassinari left a comment •

edited

Loading

oliviertassinari commented Aug 3, 2023 •

edited

Loading

oliviertassinari Aug 13, 2023 •

edited

Loading

oliviertassinari Aug 17, 2023 •

edited

Loading

oliviertassinari Aug 14, 2023 •

edited

Loading