Question

我安装了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;

Answer 1

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

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

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

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

Answer 2

由于该帖子是最近发布的，所以我很确定您遵循material-ui getting started中的步骤。

您应该做的是检查项目中安装的material-ui核心的版本。在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列表

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

找出他们在npm material-ui/core上最新，最稳定的版本

Answer 3

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

尝试一下。

严重的UI /反应错误

3 个答案: