react安装和使用Material-UI

2023-11-04 react Material-UI 安装Material-UI react使用Material-UI 1483 0

目前React官网已经推荐使用Next.js框架。Next.js 是一个全栈式的 React 框架。它用途广泛，可以让你创建任意规模的 React 应用——可以是静态博客，也可以是复杂的动态应用。要创建一个新的 Next.js 项目，请在你的终端运行：

npx create-next-app@latest

这样会创建一个新的react应用，执行会让你输入项目名称，然后做一些配置设置，比如是否使用TypeScript，是否使用ESLint等，如图所示：

react安装和使用Material-UI

要在 React 中使用 Material-UI ，需要先安装它。

Material-UI 中文官网：https://v4.mui.com/zh/

可以使用 npm 或 yarn 来安装 Material-UI：

// 用npm安装
npm install @material-ui/core

// 用yarn安装
yarn add @material-ui/core

安装依赖于 react 的 16.8.0 及以上版本，和 react-dom >= 16.8.0 及以上版本。

安装完成后，您就可以在您的 React 应用程序中使用 Material-UI 组件了。要使用 Material-UI 组件，您需要导入它并将其作为一个 React 组件使用：

import React from "react";
import Button from "@material-ui/core/Button";

const App = () => {
  return (
    <Button variant="contained">Click me!</Button>
  );
};

export default App;

这将创建一个带有 “Click me!” 文本的 Material-UI 按钮。

可以使用 Material-UI 提供的各种组件来构建您的 React 应用程序。有关 Material-UI 组件的更多信息，请参阅 Material-UI 文档。