Repository: material-ui
Issue: No SSR stylesheets when using @mui/styled-engine-sc and yarn 2/3 workspaces
Labels: external dependency,package: styled-engine-sc

The problem is that server side generated styles do not get attached to the html for the production build.

My stack:
- Yarn 3 with workspaces
- Nextjs
- Material-ui v5 with styled components



<!--
  Thank you very much for contributing to MUI by creating an issue! ❤️
  To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

This is what a page looks like with an icon:
![image](https://user-images.githubusercontent.com/8217788/140437728-90ae0aa3-276e-4df8-954c-c5fa3a38d32c.png)

The same problem occurs for regular components. Check http://localhost:3000/component in the repro project for this.

## Expected Behavior 🤔

This is what it looks like in dev, and should look like in prod:
![image](https://user-images.githubusercontent.com/8217788/140437766-6ebc8f4d-c7ab-421c-b64c-979079211112.png)


## Steps to Reproduce 🕹

<!--
  You should use the official codesandbox template as a starting point: https://mui.com/r/issue-template-next

  If that's not sufficient, please create a cloneable repository.

  Pieces of code will result in a slower response time since a maintainer has to do additional work to reproduce the problem.

  If you have an issue concerning TypeScript please start from this TypeScript playground: https://mui.com/r/ts-issue-template

  Issues without some form of live example have a longer response time.
-->

Since there are several technologies involved, here is a full reproduction repository:
https://github.com/tobilen/mui5-sc-workspaces-issue

 The steps necessary to reproduce are mentioned in the readme.

## Context 🔦

<!--
  What are you trying to accomplish? How has this issue affected you?
  Providing context helps us come up with a solution that is most useful in the real world.
-->
I believe i have narrowed the problem down to the lack of dependency hoisting in yarn berry. This can be observed when removing the `styled-components` dependency from the root `package.json`, as doing this will mean that there is only one version of it in the project. I've detailed this in the repro project readme.


This would howver not work as a solution, since sibling workspaces with a `styled-components` dependency cause the same issue.

## Your Environment 🌎

<!--
  Run `npx @mui/envinfo` and post the results.
  If you encounter issues with TypeScript please include the used tsconfig.
-->
<details>
  <summary>`npx @mui/envinfo`</summary>
  
```
  System:
    OS: macOS 11.6
  Binaries:
    Node: 15.13.0 - ~/.asdf/installs/nodejs/15.13.0/bin/node
    Yarn: 3.1.0 - ~/.asdf/shims/yarn
    npm: 7.7.6 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Not Found
    Firefox: 93.0
    Safari: 15.0
```
</details>