未捕获的类型错误：无法读取未定义的属性（读取“按钮”）答案

【问题标题】：Uncaught TypeError: Cannot read properties of undefined (reading 'button')未捕获的类型错误：无法读取未定义的属性（读取“按钮”）
【发布时间】：2021-12-12 16:56:53
【问题描述】：

我正在使用 MUI v5.0.6，当我尝试使用 Button 组件时，它一直向我显示此错误消息，我尝试安装较低版本的 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.

这是我的反应代码

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"
  },

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我想出了问题，所以我会为其他人提供解决方案

我的 VSCode 自动导入这个

import { createTheme } from '@mui/system';

这很难注意到，所以应该像这样导入

import { ThemeProvider,createTheme } from '@mui/material/styles';

【讨论】：

【解决方案2】：

import { createTheme } from '@mui/system';

createTheme 在@mui/system 中创建的主题是与 Material 设计无关的通用主题。特别是在您的情况下，theme is missing the typography property 是 concept from Material。当你想覆盖默认主题并使用MUI组件时，需要导入createTheme from：

import { createTheme } from '@mui/material/styles';

【讨论】：