找不到模块：无法解析'@ material-ui / icons / ContentCut'

Question

在我的一个React项目中，我在我的package.json中使用Material-UI图标和这些信息

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

在我添加了this link处的图标ContentCut之前，所有图标都可以正常工作：

这是我的导入方式：

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

但是我得到了错误：

未找到模块：无法解析'@ material-ui / icons / ContentCut'

我尝试通过使用yarn升级图标包：

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

但不能解决问题。

我用@material-ui/icons的最新固定版本创建了此codesandbox，如npm project page所述，它是今天的v1.4.9，以说明问题（注释ContentCut导入行以查看错误。

有人解决了这个特定问题吗（当图标可用但即使在npm / yarn升级后也无法导入）？

Answer 1

安装材料核心库：

npm install @material-ui/core

Answer 2

您可以在此处使用搜索来查看insert into message ( m_type, content, is_received, is_seen, is_active, created_at, room_no_id, sender_id ) select 'TEXT', CASE WHEN s.i % 2 = 0 THEN 'text 1' ELSE 'text 2' end, TRUE, TRUE, TRUE, dr.created_at + s.i * (interval '1 hour'), dr.id, CASE WHEN s.i % 2 = 0 THEN split_part(dr.name, '_', 2)::int ELSE split_part(dr.name, '_', 3)::int end, from room as dr, generate_series(0, 10) as s(i); ：https://material-ui.com/components/material-icons/中包含哪些图标。 ContentCut不存在。

如果您具有诸如来自material.io网站的图标的svg，则可以通过从svg中抓取@material-ui/icons元素来创建SvgIcon元素：

path

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

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"
);

Answer 3

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

解决此问题的一种方法是手动创建文件并将其保存到node_modules中的icons文件夹。我已经为您的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 4

我在react functionnal组件中有相同的问题，似乎链接到实例。我有这个功能，但是如果音频在SongButton内，那就不起作用了

<div class="button-container">
 <img src="https://placehold.it/50x50/0bf" data-src="https://placehold.it/250x150/0bf">
 <img src="https://placehold.it/50x50/f0b" data-src="https://placehold.it/250x150/f0b">
</div>

<img id="change-image" src="https://placehold.it/250x150/0bf"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 5

适合我的解决方案：

    npm i @material-ui/icons