Next.js 中优秀 UI 组件库 MATERIAL UI 的应用实战-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的发展，越来越多的企业和开发者开始采用 Next.js 这一流行的 SSR 框架。Next.js 提供了丰富的功能和便利的开发体验，而在它的生态环境中，组件库的选择也是至关重要的。MATERIAL UI 作为一款优秀的 React UI 组件库，其兼容性好、易用性高、体验流畅，越来越受到前端开发者的喜爱。本篇文章将向您介绍 Next.js 中 MATERIAL UI 的应用实践和经验积累。

为什么选择 MATERIAL UI

MATERIAL UI 是一款基于 Google 设计语言 Material Design 的 React UI 组件库。MATERIAL UI 提供了许多基于 Material Design 设计语言的组件，如按钮、卡片、图标、表格、导航等，这些组件齐全、实用、美观。此外，MATERIAL UI 还提供了一些高级组件，如数据表格、表单、选择器等，使得开发者可以快速构建各种界面，并提高业务开发的效率。

MATERIAL UI 还有一些其他优秀的特性：

兼容性好：MATERIAL UI 的组件都支持主流的浏览器和移动设备，并在 React Native 中也易于使用。
动画效果优秀：MATERIAL UI 的组件效果相对其它组件库更加流畅、自然。
易于扩展：MATERIAL UI 的样式使用了 JSS 来实现，可以进行深度定制，还有官方提供的主题颜色管理工具。

综合上述因素，MATERIAL UI 是一个非常值得选择的组件库，它可以帮助我们快速搭建出漂亮、易用、高效的界面。

Next.js 中 MATERIAL UI 的使用

在 Next.js 这个 SSR 框架中使用 MATERIAL UI，需要在项目中引入相关的依赖。首先需要安装两个包：

@material-ui/core：MATERIAL UI 组件库的核心模块
@material-ui/icons：MATERIAL UI 的图标库

接着，在页面 head 中引入 CSS：

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

在项目根目录下新建 _document.js，来扩展 Next.js 的 html 文档。需要在 _document.js 中加入一段静态方法，来引入 MATERIAL UI 的样式：

// javascriptcn.com 代码示例
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';

export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const sheets = new ServerStyleSheets();
        const originalRenderPage = ctx.renderPage;

        ctx.renderPage = () =>
            originalRenderPage({
                enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
            });

        const initialProps = await Document.getInitialProps(ctx);

        return {
            ...initialProps,
            styles: [
                ...React.Children.toArray(initialProps.styles),
                sheets.getStyleElement(),
            ],
        };
    }
    
    render() {
        return (
            <Html lang="zh-Hans">
                <Head>
                    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

完成上述操作之后，我们就可以在 Next.js 中使用 MATERIAL UI 了！例如，在 pages/index.js 中，我们可以写出一个简单的界面样例：

// javascriptcn.com 代码示例
import React from 'react';
import { Button } from '@material-ui/core';

export default function Index() {
    return (
        <div>
            <Button variant="contained" color="primary">
                Hello World
            </Button>
        </div>
    );
}

以上代码就是一个简单的页面布局，其中的 Button 组件来自于 MATERIAL UI 的组件库。

对话框组件的使用

接下来，我们演示一下一个常见的组件应用 -- 对话框组件的使用。

首先我们需要安装一个 @material-ui/lab 的扩展包：
```
npm install --save @material-ui/lab
```

加载对话框组件：

import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core';
import { Alert } from '@material-ui/lab';

编写对话框组件的使用示例：

// javascriptcn.com 代码示例
import React, { useState } from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core';
import { Alert } from '@material-ui/lab';

export default function Index() {
     const [open, setOpen] = useState(false);

     const handleClickOpen = () => {
         setOpen(true);
     };

     const handleClose = () => {
         setOpen(false);
     };

     return (
         <div>
             <Button variant="outlined" color="primary" onClick={handleClickOpen}>
                 Open dialog
             </Button>
             <Dialog open={open} onClose={handleClose}>
                 <DialogTitle>Alert</DialogTitle>
                 <DialogContent>
                     <Alert severity="warning">Are you sure?</Alert>
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={handleClose} color="primary">
                         Cancel
                     </Button>
                     <Button onClick={handleClose} color="primary" autoFocus>
                         OK
                     </Button>
                 </DialogActions>
             </Dialog>
         </div>
     );
}

以上代码就展示了使用对话框组件的一个示例。我们可以看到使用对话框组件时，只需要简单地调用好相应的方法，然后就可以轻松实现一个漂亮的对话框。当然，这个示例还可以进行更多的功能扩展。

总结

在本篇文章中，我们介绍了 Next.js 中 MATERIAL UI 的基本使用和应用实践。MATERIAL UI 作为一款优秀的 React UI 组件库，具有很多优秀的特性和功能。在 Next.js 中使用 MATERIAL UI 尤为便捷，并可以极大地提高前端开发的效率和质量。我们相信，通过我们的实践演示和经验总结，您可以更好地了解 Next.js 和 MATERIAL UI，并可以在应用实践中有更多的思路和创新。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653283f97d4982a6eb5473b8