The theme object of useTheme cannot be used in sx property

[dqfort]

Steps to reproduce

Steps:

1. Open this link to live example: (required) https://stackblitz.com/edit/stackblitz-starters-2kaocpyj?file=app%2Fpage.tsx
2. The shadow effect cannot be rendered correctly.
3. However, if you uncomment the style line in the page.tsx, it will work property.
4. Or change it as a server component, remove the use client statement and import the theme from file, it also works.

Current behavior

The theme variable can be used in sx property.

Expected behavior

The theme variable cannot be used in sx property.

Context

Error from my local Nextjs console:

Error: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <LoadingBoundary loading={null}>
      <HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>
        <RedirectBoundary>
          <RedirectErrorBoundary router={{...}}>
            <InnerLayoutRouter url="/test" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
              <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
                <Page params={Promise} searchParams={Promise}>
                  <div ref={null} className="svp0g9l" style={{}}>
                    <Container2 maxWidth="xs">
                      <StyledComponent2 as="div" ownerState={{maxWidth:"xs", ...}} className={undefined} ref={null}>
                        <div ref={null} className="ch0j3mu ch..." style={{}}>
                          <Stack2 className="s1pawpw7" style={{...}}>
                            <div
                              ref={null}
                              className="cofzdxp s8544691 s8544695 s1pawpw7"
                              style={{
+                               --s1pawpw7-0: "{\"type\":\"ArrayExpression\",\"elements\":[{\"type\":\"MemberExpressio..."
-                               --s1pawpw7-0: "{\"type\":\"ArrayExpression\",\"elements\":[{\"type\":\"MemberExpressio..."
+                               --Stack-gap-xs: "calc(0 * var(--mui-spacing, 8px))"
-                               --Stack-gap-xs: "calc(0 * var(--mui-spacing, 8px))"
                              }}
                            >
              ...

    at createConsoleError (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/client/components/errors/console-error.js:27:71)
    at handleConsoleError (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/client/components/errors/use-error-handler.js:47:54)
    at console.error (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/client/components/globals/intercept-console-error.js:47:57)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:4626:19)
    at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:845:30)
    at emitPendingHydrationWarnings (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:4625:9)
    at completeWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:11257:18)
    at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:848:13)
    at completeUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15394:19)
    at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15275:11)
    at workLoopConcurrentByScheduler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15252:9)
    at renderRootConcurrent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15227:15)
    at performWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14525:13)
    at performWorkOnRootViaSchedulerTask (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:16350:7)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:45:48)
    at div (<anonymous>)
    at Stack2 (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@pigment-css+react@0.0.30_@types+react@19.1.8_react@19.1.0_typescript@5.8.3/node_modules/@pigment-css/react/build/Stack.mjs:111:79)
    at Page (webpack-internal:///(app-pages-browser)/./src/app/test/page.tsx:27:91)
    at ClientPageRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.3.3_@babel+core@7.27.4_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/client/components/client-page.js:20:50)

Your environment

npx @mui/envinfo

    System:
    OS: macOS 15.3
  Binaries:
    Node: 22.9.0 - /opt/homebrew/bin/node
    npm: 10.8.3 - /opt/homebrew/bin/npm
    pnpm: 10.11.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 137.0.7151.121
    Edge: Not Found
    Safari: 18.3
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  7.1.1 
    @mui/icons-material:  7.1.1 
    @mui/material: ^7.1.1 => 7.1.1 
    @mui/material-nextjs: ^7.1.1 => 7.1.1 
    @mui/material-pigment-css: ^7.1.1 => 7.1.1 
    @mui/private-theming:  7.1.1 
    @mui/styled-engine:  7.1.1 
    @mui/system:  7.1.1 
    @mui/types:  7.4.3 
    @mui/utils:  7.1.1 
    @mui/x-data-grid:  8.5.1 
    @mui/x-date-pickers:  8.5.1 
    @mui/x-internals:  8.5.1 
    @pigment-css/nextjs-plugin: ^0.0.30 => 0.0.30 
    @pigment-css/react: ^0.0.30 => 0.0.30 
    @toolpad/core:  0.15.0 
    @toolpad/utils:  0.15.0 
    @types/react: ^19 => 19.1.8 
    react: ^19.0.0 => 19.1.0 
    react-dom: ^19.0.0 => 19.1.0 
    typescript: ^5 => 5.8.3 

Search keywords: theme, useTheme