找不到模塊：無法解析“@material-ui/icons/ContentCut”

Question

在我的一個 React 項目中，我使用 Material-UI 圖標和我的 package.json 中的這些信息

"@material-ui/core": "^4.9.10",
"@material-ui/icons": "^4.5.1",

在我添加此鏈接上可用的圖標ContentCut之前，所有圖標都可以正常工作：

這就是我導入它的方式：

import ContentCutIcon from '@material-ui/icons/ContentCut';

但我得到了錯誤：

找不到模塊：無法解析“@material-ui/icons/ContentCut”

我嘗試使用紗線升級圖標 package：

yarn upgrade @material-ui/core --latest
yarn upgrade @material-ui/icons --latest

但這並不能解決問題。

我使用固定的最新版本@material-ui/icons創建了這個代碼框，該版本是今天的 v1.4.9，如npm 項目頁面上所述，以說明問題（評論ContentCut導入行以查看錯誤）。

有沒有人解決了這個特定問題（當圖標可用但即使在 npm/yarn 升級后也無法導入）？

Answer 1

安裝材料芯庫：

npm install @material-ui/core

Answer 2

您可以在此處使用搜索來查看哪些圖標是@material-ui/icons的一部分： https://material-ui.com/components/material-icons/ 。 ContentCut 不存在。

如果您有 svg 圖標，例如來自 material.io 站點，您可以通過從 svg 獲取path元素來創建SvgIcon元素：

const ContentCutIcon = createSvgIcon(
  <path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z" />,
  "ContentCut"
);

這是利用此功能的沙盒的工作版本：

import React from "react";
import MailIcon from "@material-ui/icons/Mail";
import ForwardIcon from "@material-ui/icons/Forward";
import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";

const ContentCutIcon = createSvgIcon(
  <path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z" />,
  "ContentCut"
);
export default function App() {
  return (
    <div className="App">
      <h1>This is three working icons</h1>
      <ul>
        <li>
          <MailIcon />
        </li>
        <li>
          <ForwardIcon />
        </li>
        <li>
          <ContentCutIcon />
        </li>
      </ul>
    </div>
  );
}

Answer 3

npm install @mui/icons-material是解決這個問題的方法

Answer 4

這意味着 ContentCut 在 node_modules 中不可用。

解決此問題的一種方法是手動創建文件並保存到 node_modules 內的圖標文件夾。 我已經為您的 ContentCut SVG 代碼創建了文件。

ContentCut.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _createSvgIcon = _interopRequireDefault(require("./utils/createSvgIcon"));

var _default = (0, _createSvgIcon.default)(_react.default.createElement("path", {
  d: "M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"
}), 'ContentCut');

exports.default = _default;

ContentCut.d.ts

export { default } from '@material-ui/core/SvgIcon';

添加到此路徑\node_modules@material-ui\icons

然后這個導入到你的組件

import ContentCutIcon from '@material-ui/icons/ContentCut';

<ContentCutIcon />

Answer 5

我在反應功能組件中遇到了同樣的問題，似乎鏈接到實例。 我有這個工作，但如果音頻在 SongButton 內，它就不再工作了

const audio = new Audio("../song.mp3")
const SongButton = () =>{

const [isAudio, setIsAudio] = React.useState(false)

const onClick = () => {
    if(isAudio){
        audio.pause();
        //audio.currentTime = 0;
    }else{
        audio.play();
    }
    setIsAudio(!isAudio);
  }

  if(isAudio){
      return (
          <div className="SongButtonDiv">
               <PauseCircleOutlineIcon onClick={onClick} fontSize="large" />
          </div>
      )
  }else{
      return (
          <div className="SongButtonDiv">
               <PlayCircleOutlineIcon onClick={onClick} fontSize="large"/>
          </div>
       )
   }
}
export default SongButton

Answer 6

適合我的解決方案：

    npm i @material-ui/icons

Answer 7

如果您正在使用 react 進行開發，請在終端中運行
yarn add @material-ui/core @material-ui/icons