mui tab组件这么用

MUI（Material UI）是一个基于React的开源UI库，它提供了一个名为`@material-ui/tab`的Tab组件，用于创建选项卡导航栏。以下是基本的使用步骤：

1. 首先，你需要安装MUI和相关的tab组件包：

   npm install @material-ui/core @material-ui/icons // 如果还没有安装

2. 导入所需的组件和样式：

   import { Tab, Tabs, Typography } from '@material-ui/core';
   import CloseIcon from '@material-ui/icons/Close';

3. 创建一个Tabs组件，并设置其属性如`value`（当前选中的tab标签索引）、`children`（包含各个Tab项的内容）：

   function MyTabs() {
     const [value, setValue] = React.useState(0);

     const handleChange = (event, newValue) => {
       setValue(newValue);
     };

     return (
       <div>
         <Tabs value={value} onChange={handleChange}>
           <Tab label="Tab 1" icon={<CloseIcon />} />
           <Tab label="Tab 2" />
           <Tab label="Tab 3" />
         </Tabs>
         {/* 根据选中的tab内容显示 */}
         <Typography variant="body1">
           {value === 0 ? 'Content for Tab 1' : 'Content for Tab 2 or 3'}
         </Typography>
       </div>
     );
   }

4. 使用`<MyTabs />`将这个组件添加到你的React应用中。

你可以自定义Tab的外观、添加动画效果，甚至在每个Tab内部添加更复杂的组件结构。如果你想关闭某个Tab，可以提供额外的`icon` prop，并处理点击事件。