在我的一个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升级后也无法导入)?
答案 0 :(得分:2)
安装材料核心库:
npm install @material-ui/core
答案 1 :(得分:1)
您可以在此处使用搜索来查看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"
);
答案 2 :(得分:0)
这意味着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 />
答案 3 :(得分:0)
我在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>
答案 4 :(得分:0)
适合我的解决方案:
npm i @material-ui/icons