如何在 React.js 中使用 Material-UI CDN？答案

【问题标题】：How to use Material-UI CDN in React.js?如何在 React.js 中使用 Material-UI CDN？
【发布时间】：2021-04-27 03:08:37
【问题描述】：

React 开发相当新，我想在我的应用程序中使用包含一些干净的图标，所以我决定使用 Material-UI 图标，但是我想使用 CDN 而不是在应用程序中安装库。

我从网站上复制了这个 CDN 链接并将其放在 public/index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

问题：尝试在我的 react 应用中使用 Material-UI CDN，但出现错误。

Failed to compile.

Module not found: Can't resolve '@material-ui/icons/ArrowDropDownRounded'

这是什么意思？

【问题讨论】：

您能告诉我们您是如何实现图标的，并附上代码供参考吗？从您附加的内容来看，除了您没有安装 @material-ui/icons 包之外，它没有暗示任何其他内容。
查看已经解决的解决方案here

标签： reactjs

【解决方案1】：

使用 Material Design 图标的正确方法是使用来自@material-ui/core 的<Icon></Icon>。请点击link参考官方@material-ui/core文档。

实现图标，请参考下面的代码。

import { Icon } from @material-ui/core

...
<Icon> [YOUR_DESIRED_ICON] </Icon>
...

请将 [YOUR_DESIRED_ICON] 替换为 CDN 中引用此link 的图标。

希望这能解决您的问题。祝你今天过得愉快。不明白的可以参考这个sandbox。

【讨论】：

【解决方案2】：

安装 Material-ui 包

npm install @material-ui/core 
npm install @material-ui/icons

代码

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

查看代码here

【讨论】：