Material Ui Iconエラー
5706 ワード
Module not found: Can't resolve '@mui/icons-material/AccessAlarm'
このようにエラーが発生しました.私の綿入れ.jsonの表示
@material-ui/icons:4.11.2版
@mui/material:5.26版
このように設定します.
エラーの原因は、アイコンが@material-uiで受信され、mui frameworkが@mui/materialで受信されたためです.
アイコンを使用するには、アイコンとフレームをインストールする必要がありますが、私は異なる方法で2つインストールしたようです.
https://flatlogic.com/blog/material-ui-icons-in-react/
ここのリンクはよく整理されています.このリンクに@material-uiがインストールされています.
こんなリンクも
@material-ui
https://www.npmjs.com/package/@material-ui/icons
@mui/material
https://www.npmjs.com/package/@mui/icons-material
私は上のブログの文章を見て、1つの命令を入力して、このnpmjsは報告することができます
しかし公式サイトでは.
そのまま@mui/icons-materialでインポート
@material-ui/iconsにインポートする場合
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
こう書けばよかった.svgとして挿入
svg Iconで挿入したい場合は、何かをインポートする必要があります.
https://mui.com/api/svg-icon/のリンクに入り、このコードを挿入すればいいです.
import SvgIcon from '@mui/material/SvgIcon';
// or
import { SvgIcon } from '@mui/material';
ただし、@Mui/material-ui/iconsを使用している場合は@Mui/materialを追加していることに気づきました.import { SvgIcon } from "@material-ui/core";
これでいいです.(fromの後ろのコードはiconではなくmaterial UI framework)次に、次のように構成部品を作成し、return()セクションに<名前/>として挿入します.
function HomeIcon(props) {
return (
<SvgIcon {...props}>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</SvgIcon>
);
}
And the code for color setting would look the following way:
· <div className={classes.root}>
<HomeIcon />
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />
return(
...
<HomeIcon />
...
)
ソース:https://flatlogic.com/blog/material-ui-icons-in-react/Reference
この問題について(Material Ui Iconエラー), 我々は、より多くの情報をここで見つけました https://velog.io/@bellecode20/Material-Ui-Iconテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol