React 的 Material UI 介绍和安装

Material UI是通过添加设计和动画来构建应用程序并将其用于技术和科学创新的最强大和最有效的工具。它基本上是谷歌在 2014 年开发的一种设计语言。它使用更多的设计和动画、网格系统并提供阴影和闪电效果。

它可以与AngularJS 、 VueJS等所有 JavaScript 框架和 ReactJS 等库一起使用，以使应用程序更加出色和响应迅速。 Material UI 在 GitHub 上有超过 35,000 颗星，是 React 的顶级用户界面库之一。

Material UI 的特点： Material UI 提供了称为“样式函数”的低级实用函数，用于构建强大的设计系统。

• 直接从组件道具访问主题值。
• 鼓励用户界面的一致性。
• 轻松编写响应式样式。
• 使用任何主题对象。
• 压缩后小于 KB g。
• 执行速度足够快。

先决条件：

• 像（VS Code、Atom、Sublime 等）这样的代码编辑器。
• 应该安装 NodeJS。
  在 Windows 上安装 Node.js
  在 Linux 上安装 Node.js
• 创建 React 应用程序的知识。

安装：要安装 Material UI，请在您的工作目录中运行以下命令。

• 使用 npm 安装 Material UI

npm install @material-ui/core

• 使用 yarn 安装 Material UI

yarn add @material-ui/core

示例：在此示例中，我们将在App.js 中进行更改，我们将导入 Material UI 并放置一个具有原色的按钮。

HTML

import React, {Component} from 'react';
import './App.css';
import Button from '@material-ui/core/Button';
 
class App extends Component {
  render(){
    return (
      

        

        
            GeeksforGeeks
            
    
     
    );
  }
  
}
 
export default App;

输出：