React MUI Chip Display

React MUI 是一个UI库，提供了功能齐全的组件，将我们自己的设计系统引入到我们的成熟组件中。MUI是一个用户界面库，为更快速、更容易的Web开发提供了预定义和可定制的React组件，这些Material-UI组件是基于Google的Material Design构建的。

在本文中，我们将讨论React MUI Chip Display。芯片是一种紧凑的元素，用于表示输入、属性或操作。它们还允许用户输入信息、进行选择、筛选内容或触发任何操作。

React MUI Chip Props:

label: 显示芯片内的文本。
variant: 更改芯片的外观，作为“contained”芯片或“outlined”芯片。
size: 更改芯片的大小。
color: 更改芯片的填充颜色或外框颜色。
clickable: 如果为true，则在鼠标悬停时，芯片将显示细微的效果。
onClick: 当单击芯片时，调用onClick prop中给定的函数。
onDelete: 在芯片的末尾添加一个小删除图标。
deleteIcon: 将一个元素作为其值，并覆盖默认删除图标。
icon: 将一个元素作为其值，通常是一个图标组件，并将其添加到芯片标签的前缀。
avatar: 将一个元素作为其值，并在芯片标签的前缀处添加一个头像。
classes: 用于覆盖应用于芯片的CSS样式。
component: 更改芯片使用的根节点。它可以是HTML元素或任何其他组件。
disabled: 禁用芯片。
sx: 覆盖应用于芯片的默认CSS样式。

语法:

<Chip label="Submit" />

创建React项目：

步骤1： 要创建一个React应用程序，您需要通过npm命令安装React模块。

npm create-react-app project name

步骤2: 创建完React项目后，进入该文件夹进行不同的操作。

cd project name

步骤3： 创建完ReactJS应用之后，使用以下命令安装所需模块：

npm install @mui/material @emotion/react @emotion/styled

项目结构：

React MUI Chip Display

运行应用程序的步骤：

npm start

示例1: 以下示例演示了React MUI可点击芯片的不同颜色和大小。

import React from "react"; 
import Chip from "@mui/material/Chip"; 
import Stack from "@mui/material/Stack"; 
  
function App() { 
  
    const handleClick = () => { 
        alert('Clicked a chip'); 
    }; 
  
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Chip Display</h2> 
            </div> 
            <div> 
                <Stack direction="row" spacing={1} style= 
                    {{ justifyContent: 'center' }}> 
                    <Chip label="Small" size="small" 
                        color="primary" onClick={handleClick} /> 
                    <Chip label="Small" size="small" 
                        color="success" onClick={handleClick} /> 
                    <Chip label="Medium" size="medium" 
                        variant="outlined" color="primary" 
                        onClick={handleClick} /> 
                    <Chip label="Medium" size="medium" 
                        variant="outlined" color="success" 
                        onClick={handleClick} /> 
                </Stack> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI Chip Display

示例2： 下面的示例演示了React MUI头像和基于图标的芯片。我们可以在芯片组件的开头添加装饰物。我们使用“avatar”属性添加头像，使用“icon”属性添加图标。

import React from "react"; 
import Chip from "@mui/material/Chip"; 
import Stack from "@mui/material/Stack"; 
import { Avatar } from "@mui/material"; 
import FaceIcon from '@mui/icons-material/Face'; 
  
function App() { 
    const handleClick = () => { 
        console.log("Clicked"); 
    }; 
  
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Chip Display</h2> 
            </div> 
            <div> 
                <Stack direction="row" spacing={1}  
                    style={{ justifyContent: "center" }}> 
                    <Chip 
                        label="GeeksforGeeks"
                        variant="contained"
                        onClick={handleClick} 
                        icon={<FaceIcon />} 
                    /> 
                    <Chip 
                        label="GeeksforGeeks"
                        variant="outlined"
                        color="success"
                        onClick={handleClick} 
                        avatar={<Avatar alt="Gfg" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" />} 
                    /> 
                </Stack> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出:

React MUI Chip Display