我是 React 和 Next.js 的新手，同时尝试从 Node V16 升级到 Node V18。其中一项更改是将 MUI 从 v4 更改为 v5，当前使用以下软件包：
"@emotion/babel-plugin": "^11.11.0",
"@emotion/core": "^10.1.1",
"@emotion/react": "^11.11.4",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.13",
"@mui/lab": "^5.0.0-alpha.168",
"@mui/material": "^5.15.13".
"next": "14.1.3"
我运行了此处找到的官方 MUI 文档中建议的所有代码模组 https://mui.com/material-ui/migration/v5-style-changes/。不幸的是，该解决方案没有找到某些包。所以我用谷歌搜索了一下，发现了这篇文章：https://github.com/styled-components/styled-components/issues/2502。我复制了他的实现，然后在进行一些基本调试后遇到了这个问题。类型错误：无法读取未定义的属性（读取“main”）
_document.js 代码
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
import { renderToString } from 'react-dom/server';
import { extractCritical } from '@emotion/server';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
// Extract critical CSS
const emotionStyles = extractCritical(<Main />);
const emotionCss = emotionStyles.css;
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style dangerouslySetInnerHTML={{ __html: emotionCss }} />
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html lang="en">
<Head>
<meta name="description" content="" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</Head>
<body>
<noscript>You need JavaScript to use this web application</noscript>
<Main />
<NextScript />
</body>
</Html>
);
}
}
Loading.js 代码（唯一调用 CircularProgress 包的地方
import * as React from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import styled from '@emotion/styled'
import { createTheme, ThemeProvider } from '@mui/system';
const theme = createTheme();
const Container = styled.div`
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
`;
function Loading() {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
function tick() {
// reset when reaching 100%
setProgress((oldProgress) => (oldProgress >= 100 ? 0 : oldProgress + 1));
}
const timer = setInterval(tick, 20);
return () => {
clearInterval(timer);
};
}, []);
return (
<ThemeProvider theme={theme}>
<Container>
<CircularProgress variant="determinate" value={progress} />
</Container>
</ThemeProvider>
);
}
export default Loading;
以及给我的错误：
TypeError: Cannot read properties of undefined (reading 'main')
at CircularProgressRoot.ownerState.ownerState (PATH\node_modules\@mui\material\node\CircularProgress\CircularProgress.js:82:58)
at processStyleArg (PATH\node_modules\@mui\system\createStyled.js:66:67)
at PATH\node_modules\@mui\system\createStyled.js:172:25
at handleInterpolation (PATH\node_modules\@emotion\serialize\dist\emotion-serialize.cjs.dev.js:149:24)
at Object.serializeStyles (PATH\node_modules\@emotion\serialize\dist\emotion-serialize.cjs.dev.js:274:15)
at PATH\node_modules\@emotion\styled\base\dist\emotion-styled-base.cjs.dev.js:167:34
at PATH\node_modules\@emotion\react\dist\emotion-element-f93e57b0.cjs.dev.js:85:16
at renderWithHooks (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
at renderIndeterminateComponent (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
at renderElement (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderForwardRef (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5859:5)
at renderElement (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6005:11)
at renderNodeDestructiveImpl (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11) {
page: '/'
}
我尝试阅读 Stack Overflow 评论，向 Chatgpt、Perplexity AI、Youtube 和 CircularProgress 文档寻求指导，但我仍然感到迷失。
我最终使用这个包而不是“react-circular-progressbar”。遵循本指南：https://www.c-sharpcorner.com/article/how-to-implement-a-circular-progress-bar-in-react/