TypeError: Cannot read properties of undefined (reading 'dark')

Viewed 3592

I'm trying to use new material UI package. When I use the icons in the buttons, I had an error

TypeError: Cannot read properties of undefined (reading 'dark')

I've checked the previous errors and MaterialUI site, but could not figure it out. I think something is missing about themes:

App.js

import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';


const App = () => {
  return <div>
    <Button variant="contained" color="success">Material UI</Button>
    <br/>
    <br/>
    <Button variant="outlined" color="primary" size="small">Material UI</Button>
    <br/>
    <br/>
    <Button variant="contained" color="success" startIcon={<DeleteIcon/>}>
      Material UI
    </Button>
    <br/>
    <br/>
    <Button variant="contained" color="danger"  endIcon={<SendIcon/>}>
      Material UI
    </Button>
    
  </div>;
};

export default App;

package.json:

{
  "name": "new",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@fontsource/roboto": "^4.5.1",
    "@mui/icons-material": "^5.0.1",
    "@mui/material": "^5.0.1",
    "@mui/styled-engine-sc": "^5.0.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.1",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
1 Answers

If you check MUI Button API https://mui.com/api/button/ There is no color danger, so removing color="danger" from the last button will solve the problem.

Output:

screenshot of output

Related