在 React 中使用前端框架 Material-UI

在前端开发中，使用框架能帮助开发者更快速、高效地构建应用程序。而在 React 中，Material-UI 是一款广泛使用的前端设计框架，它提供了众多现成的组件和样式，可以帮助我们更加轻松地构建美观、流畅的用户界面。

在本篇文章中，我们将详细讲解如何在 React 中使用 Material-UI，包括安装、引入组件、样式的定制以及实际应用案例。

安装 Material-UI

首先，我们需要在项目中安装 Material-UI。可以使用 npm 或 yarn 在命令行中输入以下命令完成安装：

$ npm install @material-ui/core

或者

$ yarn add @material-ui/core

引入 Material-UI 组件

安装完成后，我们就可以在 React 中引入 Material-UI 的组件了。通过 ES6 的 import 语法，我们可以方便地引入所需的组件。例如，我们要使用 Button 组件，可以这样引入：

import Button from '@material-ui/core/Button';

然后，在需要使用 Button 的地方，就可以直接使用 <Button> 标签了：

<Button variant="contained" color="primary">
  Click me
</Button>

这样就能在页面上渲染出一个带有样式的按钮了。

样式的定制

Material-UI 提供了丰富的样式和属性，但有时候我们需要将样式定制得更符合项目的需求。在 Material-UI 中，可以使用 withStyles 或 makeStyle 两个函数来实现样式的定制。

使用 withStyles

withStyles 是一个高阶函数，可以将组件和样式进行关联。我们可以在组件的定义中使用 withStyles，来定义该组件的样式。

例如，我们要定制 Button 组件的样式。可以这样定义：

import { withStyles } from '@material-ui/core/styles';

const styles = {
  button: {
    color: 'white',
    background: 'blue',
    '&:hover': {
      background: 'darkblue',
    },
  },
};

function CustomizedButton(props) {
  const { classes } = props;
  return (
    <Button
      classes={{ root: classes.button }}
      variant="contained"
      color="primary"
    >
      Click me
    </Button>
  );
}

export default withStyles(styles)(CustomizedButton);

在以上代码中，我们定义了一个名为 button 的样式，将颜色和背景进行了定制，并使用了 &:hover 伪类定义了鼠标悬停时的样式。然后，我们将 button 样式绑定到了 Button 组件的 root class 中，来预设这个按钮的样式。

最后，将定义好的样式通过 withStyles 传入 CustomizedButton 组件，即可使用自定义过的样式渲染 Button。

使用 makeStyles

makeStyles 是一个 Hook，可以直接在函数组件中使用来定制样式。与 withStyles 类似，我们只需要定义好样式对象，然后在组件中引用即可。

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  button: {
    color: 'white',
    background: 'blue',
    '&:hover': {
      background: 'darkblue',
    },
  },
});

function CustomizedButton(props) {
  const classes = useStyles();
  return (
    <Button
      classes={{ root: classes.button }}
      variant="contained"
      color="primary"
    >
      Click me
    </Button>
  );
}

export default CustomizedButton;

在以上代码中，我们先使用 makeStyles 定义了一个名为 button 的样式对象。然后，使用 useStyles Hook，将样式对象解构到组件中，即可在组件内部使用。

实际应用案例

下面，我们来演示如何在一个实际的项目中使用 Material-UI。我们将创建一个简单的 TodoList 应用，用来展示 Material-UI 在实际项目中的应用。

首先，我们需要安装 react、react-dom、@material-ui/core 和 @material-ui/icons。在命令行中输入以下命令完成安装：

$ npm install react react-dom @material-ui/core @material-ui/icons

然后，创建一个新的文件夹，命名为 material-ui-todo，并在其中创建一个名为 TodoList.js 的文件，用于编写 todo list 组件。

在 TodoList.js 中，我们会用到 Material-UI 的许多组件，如 List、ListItem、Checkbox、TextField 等。

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';

import {
  List,
  ListItem,
  ListItemIcon,
  Checkbox,
  ListItemText,
  TextField,
  IconButton,
} from '@material-ui/core';

import DeleteIcon from '@material-ui/icons/Delete';

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
}));

function TodoList() {
  const classes = useStyles();
  const [items, setItems] = useState([
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build Todo List', completed: true },
    { id: 3, text: 'Learn Material-UI', completed: false },
  ]);
  const [inputValue, setInputValue] = useState('');

  const handleCheck = (id) => () => {
    const newItems = items.map((item) => {
      if (item.id === id) {
        return {
          ...item,
          completed: !item.completed,
        };
      }
      return item;
    });
    setItems(newItems);
  };
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };
  const handleAddItem = (event) => {
    event.preventDefault();
    if (inputValue.trim() === '') {
      return;
    }
    const newItem = {
      id: Math.random(),
      text: inputValue,
      completed: false,
    };
    setItems((items) => [...items, newItem]);
    setInputValue('');
  };
  const handleDeleteItem = (id) => () => {
    const newItems = items.filter((item) => item.id !== id);
    setItems(newItems);
  };
  return (
    <div className={classes.root}>
      <form onSubmit={handleAddItem}>
        <TextField
          label="Add new item"
          variant="outlined"
          fullWidth
          value={inputValue}
          onChange={handleInputChange}
          margin="dense"
        />
      </form>
      <List>
        {items.map((item) => {
          const labelId = `checkbox-list-label-${item.id}`;
          return (
            <ListItem key={item.id} dense button onClick={handleCheck(item.id)}>
              <ListItemIcon>
                <Checkbox
                  edge="start"
                  checked={item.completed}
                  tabIndex={-1}
                  disableRipple
                  inputProps={{ 'aria-labelledby': labelId }}
                />
              </ListItemIcon>
              <ListItemText id={labelId} primary={item.text} />
              <IconButton aria-label="delete" onClick={handleDeleteItem(item.id)}>
                <DeleteIcon />
              </IconButton>
            </ListItem>
          );
        })}
      </List>
    </div>
  );
}

export default TodoList;

在以上代码中，我们先使用了 useStyles 定义了一个名为 root 的样式，用于设置 List 组件的样式。

然后，使用 useState 定义了组件的状态，包括一个用于存储 Todo List 项的 items 数组和一个用于存储输入框的值的 inputValue。

接下来，我们分别定义了处理 Checkbox 勾选、输入框输入、添加 Todo List 项、删除 Todo List 项等事件处理函数，并在组件中使用 TextField、List、ListItem、ListItemIcon、Checkbox、ListItemText、IconButton 等 Material-UI 组件搭建了一个完整的 Todo List。

最后，我们在 index.js 中引入 TodoList 组件，并将其渲染到页面上。

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>,
  document.getElementById('root')
);

运行 npm start，在浏览器中打开 http://localhost:3000 ，就能看到一个漂亮的 Todo List 应用了。

总结

在本篇文章中，我们学习了如何在 React 中使用 Material-UI，包括安装、引入组件、样式的定制以及实际应用案例。借助 Material-UI 提供的强大组件和样式能力，我们能够更加高效、便捷地构建出美观、流畅、功能丰富的前端应用程序。

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

阅读全文

精选内容

相关推荐

    暂无