材质 UI/React 错误

问题描述

我安装了 Material UI 并尝试将它导入到我的 React 项目中。 它显示“找不到模块：无法解析'material-ui/core/Button”

我如何从 node_modules 导入它？

import React, { Component } from 'react';
import MuiThemeProvider from '@material-ui/styles/MuiThemeProvider';
import Button from '@material-ui/core/Button';

import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
      <div className="App">
      <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
          </div>
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <Button variant ="contained" label = "Material UI" />
      </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

使用 npm 或 yarn 安装材料 ui。 这应该从项目的主目录中完成。

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

然后，您可以使用import Button from '@material-ui/core/Button'; 在文件的顶部。

由于这篇文章是最近的，我很确定你遵循了的步骤。

你应该做的是检查你的项目中安装的 material-ui core 的版本。 在你的 package.json 文件中，检查你的 material-ui 核心版本，它应该是这样的，

"dependencies": {
    "@babel/core": "^7.1.5",
    "@babel/runtime": "^7.1.5",
    "@date-io/moment": "0.0.2",
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.1",
    "@material-ui/lab": "^3.0.0-alpha.23",
  }

或者你可以做

npm 列表

检查项目中的所有依赖项。

找出他们在上的最新稳定版本