[material-ui] Remove use client from the index styles

[siriwatknp]

closes #42750

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

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 914f8d6

[oliviertassinari]

Dead logic?

Suggested change

import * as React from 'react';

[siriwatknp]

Required, see https://ci.codesandbox.io/status/mui/material-ui/pr/41131/builds/473769.

stdout: "../mui-material/src/styles/CssVarsProvider.tsx(15,9): error TS2742: The inferred type of 'CssVarsProvider' cannot be named without a reference to 'packages/mui-types/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.\n" +
"../mui-material/src/styles/getInitColorSchemeScript.ts(13,25): error TS2742: The inferred type of 'getInitColorSchemeScript' cannot be named without a reference to 'packages/mui-types/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.\n",
stderr: '

[oliviertassinari]

Ah right, @Janpot left a comment about this above. The .d.ts file generated https://unpkg.com/browse/@mui/[email protected]/styles/CssVarsProvider.d.ts needs this import.

[Janpot]

Would the following work as well without the @ts-ignore?

/// <reference types="react" />

[oliviertassinari]

I wonder if Next.js warns when not using https://nextjs.org/docs/app/building-your-application/optimizing/scripts#inline-scripts import Script from 'next/script.

[siriwatknp]

I wonder if Next.js warns when not using https://nextjs.org/docs/app/building-your-application/optimizing/scripts#inline-scripts import Script from 'next/script.

Maybe the getInitColorSchemeScript should just return the string and let developers compose it.

[siriwatknp]

I got this error after removing use client from createTheme.

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  {keys: ..., values: ..., up: function, down: ..., between: ..., only: ..., not: ..., unit: ...}