React项目中如何安装和使用Material UI

  • 原创
  • |
  • 浏览:1943
  • |
  • 更新:

本经验介绍在React项目中中,如何安装和使用Material UI。Material UI官网有适用于React的教程。

React项目中如何安装和使用Material UI

工具/原料

  • node 12.14

方法/步骤

  1. 1

    首先,打开Material UI官网,在入门教程的安装一小节给出了安装办法。

    React项目中如何安装和使用Material UI
  2. 2

    首先进入项目文件夹(package.json所在层级),使用如下命令安装material ui的核心部分:

    npm install @material-ui/core

    React项目中如何安装和使用Material UI
  3. 3

    安装好之后就可以直接在项目中使用了,如图import了一个Button并使用。

    React项目中如何安装和使用Material UI
  4. 4

    我所安装的这个版本的Material UI,上述操作已经足够,不需要再手动引入css等。index.js保持默认如图所示即可。

    React项目中如何安装和使用Material UI
  5. 5

    接下来就可以npm start了,启动之后打开浏览器即可看到material UI的按钮效果。

    React项目中如何安装和使用Material UI
  6. 6

    通常,使用material UI还会一并安装SVG图标。使用如图命令安装图标即可。

    React项目中如何安装和使用Material UI
  7. 7

    如图所示,每个列表项左侧的图标就是material UI的图标。

    React项目中如何安装和使用Material UI
    END
  8. 7
    该信息未经授权抓取自百度经验

总结

  1. 1

    1、首先,打开Material UI官网,在入门教程的安装一小节给出了安装办法。

     

    2、首先进入项目文件夹(package.json所在层级),使用如下命令安装material ui的核心部分:npm install @material-ui/core

     

    3、安装好之后就可以直接在项目中使用了,如图import了一个Button并使用。

     

    4、我所安装的这个版本的Material UI,上述操作已经足够,不需要再手动引入css等。index.js保持默认如图所示即可。

     

    5、接下来就可以npm start了,启动之后打开浏览器即可看到material UI的按钮效果。

     

    6、通常,使用material UI还会一并安装SVG图标。使用如图命令安装图标即可。

     

    7、如图所示,每个列表项左侧的图标就是material UI的图标。

    END

注意事项

  • 如果遇到问题,可以在下面提出疑问。
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部