無法解析“材料界面/按鈕”

Question

我有一個現有的 react 項目，我想向其中添加 material-ui 庫。 所以我使用了命令npm install --save material-ui 。 但是當我運行它時，它顯示錯誤。

這是錯誤詳細信息-

無法解析“C:\\Users{user}\\demo2\\src”中的“material-ui/Button”

這是存儲庫的鏈接

https://github.com/mui-org/material-ui

<Button variant="raised" color="primary">
  Hello World
</Button>

Answer 1

對於將來面臨同樣問題的其他人：

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

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

Answer 2

您嘗試從material-ui使用的Button組件從v1開始作為 Button 導入，該組件仍處於測試階段。 要使用它，您需要像這樣安裝它

npm install --save material-ui@next

然后你可以從 material-ui 導入 Button 作為

import Button from 'material-ui/Button';

檢查其用法，如 git 存儲庫的自述文件中所述

在當前的穩定版本中，您可以選擇使用FlatButton 、 RaisedButton 、 FloatingActionButton和IconButton

Answer 3

@Shubham Khatri 的答案應該是公認的答案恕我直言。

但是，為了使用您安裝的 Material UI 庫，您應該按照 MUI 文檔中的示例使用它：

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const style = {
  margin: 12,
};

const RaisedButtonExampleSimple = () => (
  <div>
    <RaisedButton label="Default" style={style} />
    <RaisedButton label="Primary" primary={true} style={style} />
    <RaisedButton label="Secondary" secondary={true} style={style} />
    <RaisedButton label="Disabled" disabled={true} style={style} />
    <br />
    <br />
    <RaisedButton label="Full width" fullWidth={true} />
  </div>
);

export default RaisedButtonExampleSimple;

請記住，v1.x 版本的 MUI 不向后兼容 v0.x 版本。 MUI 強烈建議在新項目中使用 v1.x，即使它處於測試階段，因為從 v0.x 升級到 v1.x 所需的工作量遠遠超過 v1.x 到 v1.y（去過那里，完成了） ，我同意）

Answer 4

下面的代碼將解決這個問題。

安裝 npm 包：

npm install @mui/material @emotion/react @emotion/styled

導入使用：

import Button from '@mui/material/Button';