未捕获的类型错误:无法读取未定义的属性(读取“按钮”)
2021-10-27
12712
我正在使用 MUI v5.0.6,当我尝试使用按钮组件时,它一直显示此错误消息,我尝试安装较低版本 v5.0.5,但它显示了同样的问题,不知道是什么原因导致的,我还删除了
node_module
文件夹并再次安装软件包,但没有解决问题
Uncaught TypeError: Cannot read properties of undefined (reading 'button')
at webpackHotUpdate../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState (Button.js:60)
at transformedStyleArg (createStyled.js:179)
at handleInterpolation (emotion-serialize.browser.esm.js:137)
at serializeStyles (emotion-serialize.browser.esm.js:262)
at emotion-styled-base.browser.esm.js:110
at emotion-element-99289b21.browser.esm.js:35
at renderWithHooks (react-dom.development.js:14985)
at updateForwardRef (react-dom.development.js:17044)
at beginWork (react-dom.development.js:19098)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22776)
at workLoopSync (react-dom.development.js:22707)
at renderRootSync (react-dom.development.js:22670)
at performSyncWorkOnRoot (react-dom.development.js:22293)
at react-dom.development.js:11327
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at flushSyncCallbackQueue (react-dom.development.js:11309)
at flushSync (react-dom.development.js:22467)
at Object.scheduleRoot (react-dom.development.js:24444)
at react-refresh-runtime.development.js:284
at Set.forEach (<anonymous>)
at Object.performReactRefresh (react-refresh-runtime.development.js:263)
at RefreshUtils.js:62
出现上述错误后它也显示了这个错误
The above error occurred in the <MuiButtonRoot> component:
at http://localhost:3001/static/js/vendors~main.chunk.js:610:73
at Button (http://localhost:3001/static/js/vendors~main.chunk.js:9176:86)
at InnerThemeProvider (http://localhost:3001/static/js/vendors~main.chunk.js:12696:74)
at ThemeProvider (http://localhost:3001/static/js/vendors~main.chunk.js:12278:5)
at ThemeProvider (http://localhost:3001/static/js/vendors~main.chunk.js:12716:5)
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
这是我的 react 代码
import React from 'react';
import logo from './logo.svg';
import { ThemeProvider} from '@mui/material/styles';
import Button from '@mui/material/Button';
import { createTheme } from '@mui/system';
import './App.css';
function App() {
let theme = createTheme({
palette: {
primary: {
main: '#00ff00',
dark: '#0fff00',
light: '01fff0',
},
},
});
return (
<ThemeProvider theme={theme}>
<Button>change lange to en</Button>
</ThemeProvider>
);
}
export default App;
我的依赖项
"dependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/material": "^5.0.6",
"@mui/system": "^5.0.6",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.3",
"workbox-broadcast-update": "^5.1.3",
"workbox-cacheable-response": "^5.1.3",
"workbox-core": "^5.1.3",
"workbox-expiration": "^5.1.3",
"workbox-google-analytics": "^5.1.3",
"workbox-navigation-preload": "^5.1.3",
"workbox-precaching": "^5.1.3",
"workbox-range-requests": "^5.1.3",
"workbox-routing": "^5.1.3",
"workbox-strategies": "^5.1.3",
"workbox-streams": "^5.1.3"
},
2个回答
我发现了这个问题,所以我将为其他人提供解决方案
我的 VSCode 自动导入这个
import { createTheme } from '@mui/system';
这很难注意到,所以应该像这样导入
import { ThemeProvider,createTheme } from '@mui/material/styles';
mohamed nageh
2021-10-27
import { createTheme } from '@mui/system';
由
@mui/system
中的
createTheme
创建的主题是一个通用主题,与 Material Design 没有任何关联。具体到您的情况,
theme
缺少
typography
属性
,而该属性是
Material 中的概念
。当您想要覆盖默认主题并使用 MUI 组件时,您需要从以下位置导入
createTheme
:
import { createTheme } from '@mui/material/styles';
NearHuscarl
2021-10-27