React Material UI 按钮组件不工作

Question

我已经安装了 create-react-app 和 material-ui/core 并着手制作一个简单的按钮。

将按钮添加到应用程序文件并使用命令 npm start 后，我希望按钮显示在浏览器中，但我得到错误无效挂钩调用。

我唯一能想到的问题是依赖项可能已损坏，因为挂钩显然有效。

这是简单的按钮： App.js

import {Button} from '@material-ui/core';

export default function App() {
  return (
    <div className="App">
        <Button>Click Me</Button>
    </div>
  );
}

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

Index.html

<div id='root'></div>

这是 package.json 文件（此处只显示依赖项以减少代码长度）：

{
  "name": "mui-play",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  }

Answer 1

已解决：依赖项存在问题，我了解到即使您安装了 npm 包，您仍然必须转到源代码编辑器中的终端并将依赖项安装到 package.json 文件中。这是允许按钮在浏览器中显示的固定文件： package.json:

  "name": "mui-play",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  }

已添加行 "@material-ui/core": "^4.12.3", 以便包可以使用依赖项。

Answer 2

尝试手动添加你想要的包，然后在终端上运行 npm install

React Material UI 按钮组件不工作

React Material UI Button component not working

javascript

reactjs

button

react-hooks

dependencies