React MUI ButtonGroup API

Material-UI 是一个用户界面框架，为快速和简便的 web 开发提供预定义和可自定义的 React 组件。Material-UI 的组件是基于谷歌的 Material Design 的。在本文中，让我们讨论一下 Material-UI 库中的 ButtonGroup API。

MUI 的 ButtonGroup API 用于将相关按钮包装在单个容器中。

ButtonGroup props:

children : 表示组件的内容。
classes : 表示要覆盖默认样式的样式。
color : 表示组件的颜色。
component : 表示用于根节点的组件。
disabled : 确定组件是否被禁用。
disableElevation : 确定是否使用高程。
disableFocusRipple : 确定当使用键盘焦点到达组件时是否禁用涟漪效果。
disableRipple : 确定是否禁用涟漪动画。
fullWidth : 确定按钮是否占满容器的整个宽度。
orientation : 表示组件的方向。
size : 表示组件的大小。
sx : 表示允许定义系统覆盖和额外 CSS 样式的系统属性。
variant : 表示组件的变体。

创建 React 应用并安装模块：

步骤1： 使用以下命令创建一个 React 应用：

npx create-react-app foldername

步骤2： 在创建你的项目文件夹，例如foldername之后，使用以下命令进入：

cd foldername

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

npm install @mui/material

项目结构：

它将会是以下的样子。

React MUI ButtonGroup API

示例1: 在这个示例中，我们将尝试创建一个简单的应用程序，使用ButtonGroup组件将3个按钮包装在一起。

现在在App.js文件中编写以下代码。在这里，App是我们的默认组件，我们在这里编写了我们的代码：

App.js

import * as React from 'react'; 
import Button from '@mui/material/Button'; 
import ButtonGroup from '@mui/material/ButtonGroup'; 
  
export default function BasicButtonGroup() { 
    return ( 
        <div> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI ButtonGroup API</strong> 
                <br /> 
                <br /> 
            </div> 
            <div 
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <ButtonGroup style={{ margin: "auto" }}  
                    variant="contained" 
                    aria-label="outlined primary button group"> 
                    <Button>One</Button> 
                    <Button>Two</Button> 
                    <Button>Three</Button> 
                </ButtonGroup> 
            </div> 
        </div> 
    ); 
}

运行应用程序的步骤： 从项目的根目录下，使用以下命令运行应用程序：

npm start

输出：现在打开你的浏览器并访问http://localhost:3000/，你将看到以下输出：

React MUI ButtonGroup API

示例2 ：在这个示例中，我们创建一个简单的应用程序，使用ButtonGroup组件将3个不同的按钮一起包裹在一起，但具有不同的方向。将您的App.js更改为下面的代码。

App.js

import * as React from 'react'; 
import Button from '@mui/material/Button'; 
import ButtonGroup from '@mui/material/ButtonGroup'; 
  
export default function BasicButtonGroup() { 
    return ( 
        <div> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI ButtonGroup API</strong> 
                <br /> 
                <br /> 
            </div> 
            <div 
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <ButtonGroup orientation='vertical' 
                variant="contained" 
                aria-label="outlined primary button group"> 
                    <Button>One</Button> 
                    <Button>Two</Button> 
                    <Button>Three</Button> 
                </ButtonGroup> 
            </div> 
        </div> 
    ); 
}

运行应用程序的步骤 ：从项目的根目录中使用以下命令运行应用程序：