无法使用材质 UI 图标 .says 未找到模块

这是一个简单的程序。我正在尝试使用材质 UI 搜索图标。我已经安装了材料 UI 核心和材料 UI 图标。我仍然无法使用它们。有人可以解释一下为什么。

import React from 'react';
import "../style components/Header.css";
import SearchIcon from '@mui/icons-material/Search';

function Header() {
    return (
        <div className="Header">
            <div className="header_left">
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/84/FaceB.png" alt="" />
                <SearchIcon/>
                <div className="header_input">                   
                    <input type="text" />
                </div>
            </div>

            <div className="header_middle"></div>
            <div className="header_right"></div>

        </div>
    )
}

export default Header;

“这是错误”./src/components/Header.jsx 未找到模块:无法解析“C:UsersnoushdDesktopClonefacebook-clonesrccomponents”中的“@mui/icons-material/Search”

stack overflow Unable to use material UI icons .says module not found
原文答案

答案:

作者头像

Material UI Icons 模块依赖于 Material UI Core 来显示图标。因此,请确保您安装了核心模块。

这些组件使用 MUI SvgIcon 组件来渲染每个图标的 SVG 路径,因此对 @materialui/core 有对等依赖。

并且只是为了补充 Hamidreza 所说的内容,您可以在文件名中使用空格,但不赞成这样做,因为它们可能会被不支持它们的软件误解。

作者头像

我必须安装 @emotion/react 和 @emotion/styled 才能使其正常工作,但以前没有它们也可以正常工作。

作者头像

解决方案1:- 查看package.json 文件材质UI 版本并使用各自的材质UI。

解决方案2:- 安装最新版本的 Material UI