重复问题

• 我已搜索现有的问题

最新版本

• 我已测试了最新版本

重现问题的步骤 🕹

你好，我在客户端遇到了样式丢失的问题，但服务器端正确渲染，不知道为什么会这样。非常感谢你的帮助！
我的 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);

我的客户端脚本：
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;

我不知道为什么服务器端正确渲染，但本地客户端在js加载时缺少样式

当前行为 😯

客户端缺少MUI样式

预期行为 🤔

客户端应与服务器端渲染相同

上下文 🔦

• 无响应*

你的环境 🌎

npx @mui/envinfo

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

系统：
OS: macOS 12.6.3
Binaries:
Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
Yarn: 1.9.2 - ~/.yvm/shim/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
浏览器：
Chrome: 111.0.5563.64
Edge: Not Found
Firefox: 107.0.1
Safari: 16.3
npmPackages:
@emotion/react: 11.10.6
@emotion/styled: 11.10.6
@mui/base: 5.0.0-alpha.121
@mui/core-downloads-tracker: 5.11.13
@mui/joy: 5.0.0-alpha.71
@mui/private-theming: 5.11.13
@mui/styled-engine: 5.11.11
@mui/system: 5.11.13
@mui/types: 7.2.3
@mui/utils: 5.11.13
@types/react: 18.0.28
react: 18.2.0
react-dom: 18.2.0
typescript: 4.9.5