Mic*_*orn 5 reactjs material-ui next.js
我正在尝试将material-ui 与next.js/react.js 一起使用。
\n\n通过 _app.js 应用布局文件时，出现错误。
\n\n这是使用示例react.js模板material-ui提供的（如此令人困惑为什么它不能简单地工作 - 我的印象是material-ui通常与next.js存在问题？）。
\n\n我尝试了几种不同的方法，更改文档和应用程序，似乎仍然不起作用。
\n\n这是 Layout.js 文件
\n\nimport React from \'react\';\nimport clsx from \'clsx\';\nimport { makeStyles } from \'@material-ui/core/styles\';\nimport CssBaseline from \'@material-ui/core/CssBaseline\';\nimport Drawer from \'@material-ui/core/Drawer\';\nimport List from \'@material-ui/core/List\';\nimport Divider from \'@material-ui/core/Divider\';\nimport IconButton from \'@material-ui/core/IconButton\';\nimport Badge from \'@material-ui/core/Badge\';\nimport Container from \'@material-ui/core/Container\';\nimport Grid from \'@material-ui/core/Grid\';\nimport Paper from \'@material-ui/core/Paper\';\nimport Link from \'@material-ui/core/Link\';\nimport MenuIcon from \'@material-ui/icons/Menu\';\nimport ChevronLeftIcon from \'@material-ui/icons/ChevronLeft\';\nimport NotificationsIcon from \'@material-ui/icons/Notifications\';\nimport { mainListItems, secondaryListItems } from \'../Sidebar/Sidebar\';\nimport Chart from \'../Charts/Chart\';\nimport Deposits from \'../Deposits\';\nimport Orders from \'../Orders\';\nimport Menu from \'../AppBar/Menu\';\n\nconst drawerWidth = 240;\n\nconst useStyles = makeStyles(theme => ({\n ........\n\nexport default function Layout() {\n const classes = useStyles();\n const [open, setOpen] = React.useState(true);\n const handleDrawerOpen = () => {\n setOpen(true);\n };\n const handleDrawerClose = () => {\n setOpen(false);\n };\n const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);\n\n return (\n <div className={classes.root}>\n <CssBaseline />\n <Menu />\n <Drawer\n variant="permanent"\n classes={{\n paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),\n }}\n open={open}\n >\n <div className={classes.toolbarIcon}>\n <IconButton onClick={handleDrawerClose}>\n <ChevronLeftIcon />\n </IconButton>\n </div>\n <Divider />\n <List>{mainListItems}</List>\n <Divider />\n\n </Drawer>\n {props.children}\n\n </div>\n );\n}\n//<List>{secondaryListItems}</List> later\n继承人app.js
\n\nimport React from \'react\';\nimport App, { Container } from \'next/app\';\nimport Head from \'next/head\';\nimport { ThemeProvider } from \'@material-ui/styles\';\nimport CssBaseline from \'@material-ui/core/CssBaseline\';\nimport theme from \'../src/theme\';\n\nimport Layout from \'../components/Layout/Layout\';\n\nclass MyApp extends App {\n componentDidMount() {\n // Remove the server-side injected CSS.\n const jssStyles = document.querySelector(\'#jss-server-side\');\n if (jssStyles) {\n jssStyles.parentNode.removeChild(jssStyles);\n }\n }\n\n render() {\n const { Component, pageProps } = this.props;\n\n return (\n <Container>\n <Head>\n <title>My page</title>\n </Head>\n <ThemeProvider theme={theme}>\n {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}\n <CssBaseline />\n <Layout>\n <Component {...pageProps} />\n </ Layout>\n </ThemeProvider>\n </Container>\n );\n }\n}\n导出默认的MyApp；
\n\n和 document.js
\n\nimport React from \'react\';\nimport Document, { Head, Main, NextScript } from \'next/document\';\nimport { ServerStyleSheets } from \'@material-ui/styles\';\nimport theme from \'../src/theme\';\n\nclass MyDocument extends Document {\n render() {\n return (\n <html lang="en">\n <Head>\n <meta charSet="utf-8" />\n {/* Use minimum-scale=1 to enable GPU rasterization */}\n <meta\n name="viewport"\n content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"\n />\n {/* PWA primary color */}\n <meta name="theme-color" content={theme.palette.primary.main} />\n <link\n rel="stylesheet"\n href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"\n />\n </Head>\n <body>\n <Main />\n <NextScript />\n </body>\n </html>\n );\n }\n}\n\nMyDocument.getInitialProps = async ctx => {\n // Resolution order\n //\n // On the server:\n // 1. app.getInitialProps\n // 2. page.getInitialProps\n // 3. document.getInitialProps\n // 4. app.render\n // 5. page.render\n // 6. document.render\n //\n // On the server with error:\n // 1. document.getInitialProps\n // 2. app.render\n // 3. page.render\n // 4. document.render\n //\n // On the client\n // 1. app.getInitialProps\n // 2. page.getInitialProps\n // 3. app.render\n // 4. page.render\n\n // Render app and page and get the context of the page with collected side effects.\n const sheets = new ServerStyleSheets();\n const originalRenderPage = ctx.renderPage;\n\n ctx.renderPage = () =>\n originalRenderPage({\n enhanceApp: App => props => sheets.collect(<App {...props} />),\n });\n\n const initialProps = await Document.getInitialProps(ctx);\n\n return {\n ...initialProps,\n // Styles fragment is rendered after the app and page rendering finish.\n styles: [\n <React.Fragment key="styles">\n {initialProps.styles}\n {sheets.getStyleElement()}\n </React.Fragment>,\n ],\n };\n};\n\nexport default MyDocument;\n这是错误信息。
\n\n\xc3\x97\nInvalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://xxxx-invalid-hook-call for tips about how to debug and fix this problem.\n\xe2\x96\xb6 11 stack frames were collapsed.\nctx.renderPage\n./pages/_document.js:60\n 57 | const sheets = new ServerStyleSheets();\n 58 | const originalRenderPage = ctx.renderPage;\n 59 | \n> 60 | ctx.renderPage = () =>\n | ^ 61 | originalRenderPage({\n 62 | enhanceApp: App => props => sheets.collect(<App {...props} />),\n 63 | });\nView compiled\n\xe2\x96\xb6 4 stack frames were collapsed.\nThis screen is visible only in development. It will not appear if the app crashes in production.\nOpen your browser\xe2\x80\x99s developer console to further inspect this error.\n| 归档时间： |
|
| 查看次数： |
2221 次 |
| 最近记录： |