React MUI按钮组输入

React MUI 是一个UI库，提供了全功能组件，将我们自己的设计系统引入到我们的产品级组件中。MUI是一个用户界面库，提供预定义和可定制的React组件，用于更快速和简便的Web开发，这些Material-UI组件基于谷歌的Material Design。

在这篇文章中，我们将讨论React MUI按钮组输入。ButtonGroup组件用于将相关按钮分组。

按钮组类型：

按钮变种： 在此中支持所有标准按钮变种。
大小和颜色： 我们可以使用 size 和 color 属性来控制按钮组的外观。
垂直组： 按钮组可以使用 orientation 属性来显示垂直排列。
分割按钮： 还可以用于创建分割按钮。
禁用的高程： 可以禁用按钮组的高程。

React MUI按钮组输入属性：

children： 表示组件的内容
classes： 表示要覆盖默认样式的样式。
color： 表示组件的颜色
component： 表示用于根节点的组件
disabled： 决定组件是否禁用
disableElevation： 决定是否使用高程
disableFocusRipple： 决定键盘聚焦时是否禁用涟漪效果
disableRipple： 决定是否禁用涟漪动画
fullWidth： 决定按钮是否占据容器的全部宽度
orientation： 表示组件的排列方式
size： 表示组件的尺寸
sx： 表示一个系统属性，允许定义系统重写和额外的CSS样式。
variant： 表示组件的变种

创建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按钮组输入

运行应用程序的步骤： 在终端中写下以下步骤以运行应用程序：

npm start

示例1： 下面的示例演示了不同大小的React MUI按钮组变体。

import React from "react"; 
import Button from "@mui/material/Button"; 
import ButtonGroup from "@mui/material/ButtonGroup"; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Button group Input</h2> 
            </div> 
            <div style={{ textAlign: "center" }}> 
                <ButtonGroup variant="outlined" 
                    aria-label="outlined button group" size="large"> 
                    <Button>Add</Button> 
                    <Button>Delete</Button> 
                    <Button>Edit</Button> 
                </ButtonGroup> 
                <ButtonGroup variant="text" 
                    aria-label="text button group" 
                    size="medium" style={{ marginLeft: 10 }}> 
                    <Button>Add</Button> 
                    <Button>Delete</Button> 
                    <Button>Edit</Button> 
                </ButtonGroup> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI按钮组输入

示例2： 下面的示例演示了使用禁用的阴影效果的React MUI垂直按钮组。

import React from "react"; 
import Button from "@mui/material/Button"; 
import ButtonGroup from "@mui/material/ButtonGroup"; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Button group Input</h2> 
            </div> 
            <div style={{ textAlign: "center" }}> 
                <ButtonGroup 
                    variant="contained"
                    disableElevation 
                    orientation="vertical"
                    aria-label="outlined button group"
                    size="large"
                > 
                    <Button>Add</Button> 
                    <Button>Delete</Button> 
                    <Button>Edit</Button> 
                </ButtonGroup> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI按钮组输入