如何在 Material UI 选项卡中拥有多个行选项卡

Question

我在 Material UI 选项卡中有近 30 个选项卡，用户必须滚动两次才能看到所有选项卡，我想用滚动显示两行选项卡，而不是用滚动显示一行，这将帮助用户看到大多数选项卡选项卡一目了然。
我怎样才能做这样的事情？，我查看了Material UI文档，但找不到任何有用的东西，我尝试手动给它赋予CSS样式，但我无法实现我的目标（我的CSS技能很平庸）。
为了说明我的意思multiple row tabs，这里有一个示例图像：

任何帮助深表感谢。

Answer 1

尝试仔细阅读您使用的任何东西的文档，以防止将来出现不必要的问题

请访问此了解更多详细信息和完整代码https://material-ui.com/components/tabs/

<div className={classes.root}>
  <AppBar position="static">
    <Tabs value={value}
     onChange={handleChange} 
      aria-label="simple tabs example" 
      indicatorColor="primary"
      textColor="primary"
      variant="scrollable"
      scrollButtons="auto"
      aria-label="scrollable auto tabs example"
    >
      <Tab label="Item One" {...a11yProps(0)} />
      <Tab label="Item Two" {...a11yProps(1)} />
      <Tab label="Item Three" {...a11yProps(2)} />
    </Tabs>
  </AppBar>
  <TabPanel value={value} index={0}>
    Item One
  </TabPanel>
  <TabPanel value={value} index={1}>
    Item Two
  </TabPanel>
  <TabPanel value={value} index={2}>
    Item Three
  </TabPanel>
</div>

编辑：请注意选项卡中的变体