Styles missing when js loaded

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Hi, I am encountering the style-missing issue on client side, but the server-rendered correctly, no idea why it happend. Many thanks for your help!

My server.js:

import React from 'react';
import Koa from 'koa';
import Router from '@koa/router';
import { renderToPipeableStream } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from '@root/app';
import Shell from '@root/shell';

const app = new Koa();
const router = new Router();

router.get('/(.*)', async (ctx) => {
  const pipePromise: Promise<ReturnType<typeof renderToPipeableStream>['pipe']> = new Promise((resolve, reject) => {
    const { pipe } = renderToPipeableStream(
      <App>
        <StaticRouter location={ctx.URL}>
          <Shell />
        </StaticRouter>
      </App>,
      {
        bootstrapScripts: [
          'https://unpkg.com/react@18.2.0/umd/react.development.js',
          'https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js',
          '/static/bundle.js',
        ],
        onShellReady() {
          resolve(pipe);
        },
        onShellError(err) {
          reject(err);
        },
        onError(error) {
          reject(error);
        },

      },
    );
  });
  const pipe = await pipePromise;
  ctx.status = 200;
  pipe(ctx.res);
});

app.use(router.routes())
  .use(router.allowedMethods());

app.listen(1001);

My client scripts:
index.tsx:

import * as React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './app';
import Shell from './shell';

hydrateRoot(
  document,
  <App>
    <React.StrictMode>
      <BrowserRouter>
        <Shell />
      </BrowserRouter>
    </React.StrictMode>
  </App>,
);

shell.tsx:

import { CssVarsProvider } from '@mui/joy';
import React from 'react';
import AppRouter from './app-router';
import theme from './themes';

const Shell = () => (
  <CssVarsProvider theme={theme} defaultMode="system">
    <AppRouter />
  </CssVarsProvider>
);

export default Shell;

app-router.tsx:

import React from 'react';
import {
  Route,
  Routes,
} from 'react-router-dom';
import ErrorPage from './pages/error';
import Test from './pages/test';
import Home from './pages/home';

function AppRouter() {
  return (
    <Routes>
      <Route errorElement={<ErrorPage />} path="/">
        <Route index element={<Home />} />
        <Route path="test" element={<Test />} />
        <Route path="*" element={<ErrorPage />} />
      </Route>
    </Routes>
  );
}

export default AppRouter;

home.tsx:

import {
  Button, List, ListItem, ListItemButton, useTheme,
} from '@mui/joy';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './pages.module.less';

const Home = () => {
  const nav = useNavigate();
  const theme = useTheme();

  return (
    <>
      <header>
        <List component="nav">
          <ListItem>
            <ListItemButton onClick={() => nav('/test')}>test</ListItemButton>
          </ListItem>
          <ListItem>2</ListItem>
          <ListItem>3</ListItem>
        </List>
      </header>
      <main>
        <section>
          <div
            className={styles.test}
            style={{
              width: 100,
              height: 100,
              backgroundColor: theme.palette.success[900],
            }}
          />
          <Button>test button</Button>
        </section>
      </main>
    </>
  );
};

export default Home;

I have no idea why the server side rendered correctly but the local client miss the styles when js loaded

Current behavior 😯

client side is missing the MUI styles

Expected behavior 🤔

client should render same as server

Context 🔦

No response

Your environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.