material-ui 当js加载时,样式丢失,

wlzqhblo  于 6个月前  发布在  其他
关注(0)|答案(4)|浏览(65)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已测试了最新版本

重现问题的步骤 🕹

你好,我在客户端遇到了样式丢失的问题,但服务器端正确渲染,不知道为什么会这样。非常感谢你的帮助!
我的 server.js :

  1. import React from 'react';
  2. import Koa from 'koa';
  3. import Router from '@koa/router';
  4. import { renderToPipeableStream } from 'react-dom/server';
  5. import { StaticRouter } from 'react-router-dom/server';
  6. import App from '@root/app';
  7. import Shell from '@root/shell';
  8. const app = new Koa();
  9. const router = new Router();
  10. router.get('/(.*)', async (ctx) => {
  11. const pipePromise: Promise<ReturnType<typeof renderToPipeableStream>['pipe']> = new Promise((resolve, reject) => {
  12. const { pipe } = renderToPipeableStream(
  13. <App>
  14. <StaticRouter location={ctx.URL}>
  15. <Shell />
  16. </StaticRouter>
  17. </App>,
  18. {
  19. bootstrapScripts: [
  20. 'https://unpkg.com/react@18.2.0/umd/react.development.js',
  21. 'https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js',
  22. '/static/bundle.js',
  23. ],
  24. onShellReady() {
  25. resolve(pipe);
  26. },
  27. onShellError(err) {
  28. reject(err);
  29. },
  30. onError(error) {
  31. reject(error);
  32. },
  33. },
  34. );
  35. });
  36. const pipe = await pipePromise;
  37. ctx.status = 200;
  38. pipe(ctx.res);
  39. });
  40. app.use(router.routes())
  41. .use(router.allowedMethods());
  42. app.listen(1001);

我的客户端脚本:
index.tsx :

  1. import * as React from 'react';
  2. import { hydrateRoot } from 'react-dom/client';
  3. import { BrowserRouter } from 'react-router-dom';
  4. import App from './app';
  5. import Shell from './shell';
  6. hydrateRoot(
  7. document,
  8. <App>
  9. <React.StrictMode>
  10. <BrowserRouter>
  11. <Shell />
  12. </BrowserRouter>
  13. </React.StrictMode>
  14. </App>,
  15. );

shell.tsx :

  1. import { CssVarsProvider } from '@mui/joy';
  2. import React from 'react';
  3. import AppRouter from './app-router';
  4. import theme from './themes';
  5. const Shell = () => (
  6. <CssVarsProvider theme={theme} defaultMode="system">
  7. <AppRouter />
  8. </CssVarsProvider>
  9. );
  10. export default Shell;

app-router.tsx :

  1. import React from 'react';
  2. import {
  3. Route,
  4. Routes,
  5. } from 'react-router-dom';
  6. import ErrorPage from './pages/error';
  7. import Test from './pages/test';
  8. import Home from './pages/home';
  9. function AppRouter() {
  10. return (
  11. <Routes>
  12. <Route errorElement={<ErrorPage />} path="/">
  13. <Route index element={<Home />} />
  14. <Route path="test" element={<Test />} />
  15. <Route path="*" element={<ErrorPage />} />
  16. </Route>
  17. </Routes>
  18. );
  19. }
  20. export default AppRouter;

home.tsx :

  1. import {
  2. Button, List, ListItem, ListItemButton, useTheme,
  3. } from '@mui/joy';
  4. import React from 'react';
  5. import { useNavigate } from 'react-router-dom';
  6. import styles from './pages.module.less';
  7. const Home = () => {
  8. const nav = useNavigate();
  9. const theme = useTheme();
  10. return (
  11. <>
  12. <header>
  13. <List component="nav">
  14. <ListItem>
  15. <ListItemButton onClick={() => nav('/test')}>test</ListItemButton>
  16. </ListItem>
  17. <ListItem>2</ListItem>
  18. <ListItem>3</ListItem>
  19. </List>
  20. </header>
  21. <main>
  22. <section>
  23. <div
  24. className={styles.test}
  25. style={{
  26. width: 100,
  27. height: 100,
  28. backgroundColor: theme.palette.success[900],
  29. }}
  30. />
  31. <Button>test button</Button>
  32. </section>
  33. </main>
  34. </>
  35. );
  36. };
  37. export default Home;

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

当前行为 😯

客户端缺少MUI样式

预期行为 🤔

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

上下文 🔦

  • 无响应*

你的环境 🌎

npx @mui/envinfo

  1. Don't forget to mention which browser you used.
  2. 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

3wabscal

3wabscal1#

在服务器端和客户端上,您可能会错过 CacheProvider。请参阅此文档:https://mui.com/material-ui/guides/server-rendering/#the-client-side

v64noz0r

v64noz0r2#

你正在使用 React 18 的 renderToPipeableStream,但它目前不受 Material UI 的两个主要样式引擎(Emotion 和 styled-components)的支持。关于这个问题的讨论可以在这里找到:herehere。据我所知,除了一些已经粘贴到各种 GitHub 评论中的hacks之外,没有其他方法可以在 React 18 流式渲染中使用 Material UI。我不确定为什么 Material UI 文档中没有提到这一点,甚至没有一个专门的问题来解决这个问题。我是不是漏掉了一种让这个工作的方法?

zqdjd7g9

zqdjd7g93#

@thomasjm 他们正在开发mui/zero,并且据说将在11月发布一个alpha版本。
#38137
查看mui/zero的参考资料: https://github.com/mui/material-ui/releases

5f0d552i

5f0d552i4#

你是否成功解决了这个问题?我正在与一个氢气项目面临相同的问题。

相关问题