Стиль материала не загружается в производственной сборке
В настоящее время я работаю над проектом с Nextjs и Material UI. В режиме разработки все отлично работает. Когда я создаю проект, первая страница загружается нормально, но когда я перехожу на вторую страницу, многие компоненты загружаются без стилей, например диалоговое окно.
В режиме разработки:
В производственной сборке:
Я предполагаю, что это проблема либо с тем, что кеш эмоций не вводится должным образом с помощью SSR, либо с тем, как я использую компонент Link:
//Link from next/link
<Link href = {href}>
<ButtonBase sx = {{ width: "100%" }}>
<CardContent item = {item} />
</ButtonBase>
</Link
Кэш эмоций реализован как в этом примере: https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript
Версия React: 18.1.0 (я также пробовал версии 17.0.2 и 18.0) Далее: 12.1.6 МУИ: 5.7
Этот вопрос предлагает использовать ServerStyleSheets, который не включен в MUI5.
Кто-нибудь еще сталкивался с такой же проблемой?
Спасибо, в этом примере не используется Next.
Ответы 2
Попробуйте обновить файл _document следующим образом:
Вы можете использовать файл _document по умолчанию, просто добавив часть getInitialProps
import React from 'react';
import Document, {
Html, Head, Main, NextScript,
} from 'next/document';
import { ServerStyleSheets } from '@mui/styles'; // works with @material-ui/core/styles, if you prefer to use it.
export default class MyDocument extends Document {
render() {
return (
<Html lang = "en">
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Resolution order
//
// On the server:
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. document.getInitialProps
// 4. app.render
// 5. page.render
// 6. document.render
//
// On the server with error:
// 1. document.getInitialProps
// 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. app.render
// 4. page.render
// Render app and page and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};
Спасибо, я пробовал это, но это не сработало для меня. Я предполагаю, что это из более старой версии next/mui, поскольку ее нет в репозитории с примерами?
Мне удалось решить проблему самостоятельно, сначала установив эти пакеты в их последние версии:
- @эмоция/кэш
- @emtion/реагировать
- @emotion/сервер
- @emotion/styled
- @муи
- Следующий
- Реагировать и реагировать-дом
Затем я добавил свойство в tsconfig.json после тщательного сравнения моего проекта с пример репо и обнаружил, что мне не хватает этого:
"jsxImportSource": "@emotion/react",
Я не совсем уверен, какое из этих действий действительно решило проблему, но я предполагаю, что последнее.
Если вы столкнулись с похожей проблемой, вы можете попробовать добавить ее в свой tsconfig и посмотреть, исправит ли она ситуацию.
Проверьте этот mui.com/material-ui/guides/server-rendering/…