https://github.com/tobilen/mui5-sc-workspaces-issue

https://github.com/tobilen/mui5-sc-workspaces-issue

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/tobilen/mui5-sc-workspaces-issue
• Owner: tobilen
• Created: 2021-11-04T23:55:56.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-11-05T13:31:25.000Z (over 4 years ago)
• Last Synced: 2025-12-01T05:54:35.302Z (7 months ago)
• Language: TypeScript
• Homepage: https://github.com/mui-org/material-ui/issues/29516
• Size: 59.5 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Summary

Shows a problem when combining:

- Material UI V5

- mui styled-components engine

- Nextjs SSR

- yarn berry (a.k.a. yarn modern or yarn 2/3) workspaces

### Reproduce

1. Check out repo

2. run `yarn`

3. run `yarn dev`

4. visit http://localhost:3000/

You will get a page with a properly sized material ui icon in the center:

![dev screenshot](dev.png)

5. run `yarn build`

6. run `yarn start`

7. visit http://localhost:3000/ again

Now the icon does not have any styles attached to it and takes on the full screen width.

![prod screenshot](prod.png)

### Fix

1. Remove the `styled-components` dependency from the root `package.json`:

```diff

    "start": "yarn workspace @mui5-sc-workspaces-issue/next start"

  },

  "resolutions": {

    "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.0.4"

  },

  "dependencies": {

-    "styled-components": "^5.3.1"

  },

  "devDependencies": {

    "@types/node": "^16.11.6",

```

2. Repeat the steps above. This time, the icon styles get applied on the prod build as well.