[joy-ui][GlobalStyles] Ensure compatibility with RSC

[mateuseap]

Closes #38494

What I Did

In this pull request, I made the following changes:

1. Created a new file, GlobalStyles.tsx, in the packages/mui-joy/src/GlobalStyles folder.
2. Modified the packages/mui-joy/src/GlobalStyles/index.tsx file to export the GlobalStyles.
3. Ran the script yarn rsc:build to insert the use client directive into the GlobalStyles.tsx file.

I followed the guidance provided by @siriwatknp in the following comment: #38494 (comment).

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-38955--material-ui.netlify.app/

@material-ui/core: parsed: +Infinity% , gzip: +Infinity%
@material-ui/lab: parsed: +Infinity% , gzip: +Infinity%
@material-ui/styles: parsed: +Infinity% , gzip: +Infinity%
@material-ui/private-theming: parsed: +Infinity% , gzip: +Infinity%
@material-ui/system: parsed: +Infinity% , gzip: +Infinity%
@material-ui/unstyled: parsed: +Infinity% , gzip: +Infinity%
@material-ui/utils: parsed: +Infinity% , gzip: +Infinity%
@mui/material-next: parsed: +Infinity% , gzip: +Infinity%
@mui/joy: parsed: +Infinity% , gzip: +Infinity%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 9a70d9a

[oliviertassinari]

Off-topic

This makes me wonder as we don't do it in this PR, @mj12albert why add this in #37656?

material-ui/packages/mui-material/src/GlobalStyles/index.js

Lines 1 to 2 in 6e45f83

	'use client';
	export { default } from './GlobalStyles';

How about we remove all of those?

[mj12albert]

This makes me wonder, @mj12albert why add this in #37656?

@oliviertassinari Without 'use client' in the index file, the RSC error would occur when using named imports like import { Box } from '@mui/material' – #37656 (comment)

However I tried to make a sandbox based off your PR to show this and can't reproduce that error anymore, so maybe it's no longer needed now

[oliviertassinari]

Without 'use client' in the index file, the RSC error would occur when using named imports like import { Box } from '@mui/material' – #37656 (comment)

@mj12albert A reproduction of the issue raised in #37656 (comment): https://stackblitz.com/edit/github-9lau57-jwzhw4?file=package.json,src%2Fapp%2Fpage.tsx.

It looks like the problem was that we were missing "use client" in files that were client components, for example in @mui/base/node/FormControl/FormControlContext.js. It wasn't that the index missed "use client".

In #38967, the issue seems to be gone.

[siriwatknp]

@mj12albert the index file also needs 'use client'; right?

[siriwatknp]

Ah, based on https://github.com/mui/material-ui/pull/38967/files#diff-dafb0dc18749ba2c9f0efdec79126704f72fc6a105b2247580eb3d268c067d84, it is not needed.

[siriwatknp]

👍 Great first PR! looking forward to the next one. Thanks a lot!