[Joy][GlobalStyles] Does not work when used in a RSC directly

[acomanescu]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

When using the GlobalStyles component, it requires the parent component to have the client flag ('use client';) otherwise it throws this error:

Error: Attempted to call unstable_createGetCssVar() from the server but unstable_createGetCssVar is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

Maybe adding the client flag to this component, similar to Box or other UI component, would fix it.

Current behavior 😯

When used in a RSC it does not work, so we need to create a wrapper component that has 'use client'; flag.

Expected behavior 🤔

I expect it to accept a style object directly.

Context 🔦

Next.js with app router.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.4.1
  Binaries:
    Node: 20.5.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 115.0.5790.170
    Edge: Not Found
    Safari: 16.5.2
  npmPackages:
    @emotion/react: 11.11.1 => 11.11.1 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.11 
    @mui/core-downloads-tracker:  5.14.5 
    @mui/joy: 5.0.0-beta.2 => 5.0.0-beta.2 
    @mui/private-theming:  5.14.5 
    @mui/styled-engine:  5.13.2 
    @mui/system:  5.14.5 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.5 
    @types/react: 18.2.20 => 18.2.20 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.1.6 => 5.1.6 

[siriwatknp]

Steps to fix:

• create GlobalStyles.tsx in packages/mui-joy/src/GlobalStyles/GlobalStyles.tsx and reexport from the index instead
• run the script yarn rsc:build, the use client directive will be added to the GlobalStyles.tsx

[mateuseap]

@siriwatknp I've followed the steps you've described to fix the problem and opened a PR! Excited to collaborate on this.