类型错误：无法读取未定义的属性（读取“暗”）

Question

我正在尝试使用新的材质 UI 包。当我使用按钮中的图标时，出现错误

类型错误：无法读取未定义的属性（读取“暗”）

我检查了之前的错误和 MaterialUI 网站，但无法弄清楚。我认为主题缺少一些东西：

应用程序.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;

包.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"
    ]
  }
}

Answer 1

如果检查 MUI Button API https://mui.com/api/button/ 没有颜色危险，那么color="danger"从最后一个按钮中删除将解决问题。

输出：

编辑：

另一种选择是，您可以向主题添加自定义颜色（危险、中性或任何颜色）。

添加自定义颜色的示例：