React MUI Badge Display

React MUI 是一个UI库，提供完全加载的组件，将我们自己的设计系统带到我们的生产就绪组件中。MUI是一个用户界面库，为更快速、简便的Web开发提供预定义和可定制的React组件，这些Material-UI组件基于Google的Material Design。

在本文中，我们将讨论React MUI徽章显示。徽章在其子元素的右上方显示一个小徽章。徽章可以有多种颜色，并且还包括最大值、对齐和重叠属性。

React MUI徽章属性：

anchorOrigin： 它表示徽章的锚点。
badgeContent： 它包含在徽章内呈现的内容。
children： 徽章将相对于此节点添加。
classes： 它覆盖或扩展应用于组件的样式。
color： 它是组件的颜色。
component： 它是用于根节点的组件。
components： 它是用于徽章内每个插槽的组件。
componentsProps： 这些是用于徽章内每个插槽的props。
invisible： 如果为true，徽章将不可见。
max： 它显示最大值。
overlap： 徽章的包裹形状应该重叠。
showZero： 它控制徽章在badgeContent为零时是否隐藏。
slotProps： 用于徽章内每个插槽的props。
slots： 用于徽章内每个插槽的组件。
sx： 允许定义系统覆盖以及额外的CSS样式的系统属性。
variant： 要使用的变种。

语法：

<Badge badgeContent={4} color="primary">
    <Icon color="action" />
</Badge>

创建React项目：

步骤1： 通过npm命令安装React模块来创建React应用。

npm create-react-app project name

步骤2： 创建你的React项目后，进入文件夹执行不同的操作。

cd project name

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

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

项目结构：

React MUI Badge Display

运行应用程序的步骤：

npm start

示例1： 下面的示例演示了不同颜色和对齐方式的React MUI徽章。

import React from "react"; 
import Badge from "@mui/material/Badge"; 
import Stack from "@mui/material/Stack"; 
import BellIcon from "@mui/icons-material/Notifications"; 
  
function App() { 
    return ( 
        <div> 
            <div style={ 
                { textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Badge Display</h2> 
            </div> 
            <div> 
                <Stack spacing={2} direction="row" 
                    justifyContent="center"> 
                    <Badge 
                        badgeContent={1} 
                        color="primary"
                        anchorOrigin={{ 
                            vertical: "top", 
                            horizontal: "left", 
                        }} 
                    > 
                        <BellIcon color="action" /> 
                    </Badge> 
                    <Badge 
                        badgeContent={2} 
                        color="success"
                        anchorOrigin={{ 
                            vertical: "top", 
                            horizontal: "right", 
                        }} 
                    > 
                        <BellIcon color="action" /> 
                    </Badge> 
                    <Badge 
                        badgeContent={3} 
                        color="secondary"
                        anchorOrigin={{ 
                            vertical: "bottom", 
                            horizontal: "right", 
                        }} 
                    > 
                        <BellIcon color="action" /> 
                    </Badge> 
                    <Badge 
                        badgeContent={4} 
                        color="warning"
                        anchorOrigin={{ 
                            vertical: "bottom", 
                            horizontal: "right", 
                        }} 
                    > 
                        <BellIcon color="action" /> 
                    </Badge> 
                </Stack> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI Badge Display

示例2： 下面的示例演示了React MUI的徽章与最大值重叠的效果。

import React from "react"; 
import Badge from "@mui/material/Badge"; 
import Stack from "@mui/material/Stack"; 
import MailIcon from "@mui/icons-material/Mail"; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Badge Display</h2> 
            </div> 
            <div> 
                <Stack spacing={2} direction="row"
                    justifyContent="center"> 
                    <Badge 
                        badgeContent={100} 
                        overlap="circular"
                        color="primary"
                    > 
                        <MailIcon color="action" /> 
                    </Badge> 
                    <Badge 
                        badgeContent={1000} max={999} 
                        color="success"
                    > 
                        <MailIcon color="action" /> 
                    </Badge> 
                </Stack> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI Badge Display