Question

目前正在上课的小组项目。它在前面使用React和MaterializeCss。

我正在尝试添加图标，例如，在登录屏幕上，用户名输入字段旁边有一个小人物图标，但是它只显示“ ACCOUNT_USER”或在“发送”按钮上，我想显示一个图标称为发送，但仅显示“ SEND”。这是一个代码示例。

          <div className="row">
            <div className="input-field col s6 offset-m3">
              <i className="material-icons prefix">account_circle</i>
              <input id="username" type="text" className="validate" />
              <label htmlFor="username">Username</label>
            </div>

在有人告诉我使用https://materializecss.com/getting-started.html中的CDN行之前，我已经拥有了。

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

有人知道这可能是什么问题吗？该程序当前在本地托管上运行，我读到这可能是物化问题，到目前为止，我发现的唯一显而易见的解决方案是从google下载图标包，但是为一个程序下载91k图标文件很愚蠢，？希望有更好的解决方案

Answer 1

如何将 materialize-css 与带有图标和其他 js 功能的 React 一起使用

yarn add materialize-css@next --save or npm install materialize-css@next --save

yarn add install material-icons or npm install material-icons

3.请像这样导入以下内容；快照

导入'materialize-css/dist/css/materialize.min.css';

导入'materialize-css/dist/js/materialize';

导入'material-icons/iconfont/material-icons.css'

材质图标仅渲染文本，React Materialize

1 个答案: