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

Question

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

任何帮助深表感谢。

Answer 1

我正在努力解决类似的问题。我已经扔掉了文档，看起来使用 Tabs/Tab 功能是不可能的。现在我可以看到两个选项:

使用上面提到的属性变体="scrollable"和scrollButtons="auto"。这不会给你你所期望的，但至少它是有效的。

实现您自己的选项卡。您可以使用网格。下面的例子只是为了展示一种方法。它不是 redy 解决方案，但可以轻松调整。

const useStyles = makeStyles((theme) => ({
  navigationLinkContainer: { 
    // up to you
  },
  navigationLinkButtonActive: {
    color: '#ffffff',
    // up to you
  },
 
}));

const NavigationLink = (props) => {
  const classes = useStyles();
  return (
    <Grid item className={classes.navigationLinkContainer}>
      <Button
        component={Link}
        onClick={props.onClick}
      >
        {props.children}
      </Button>
    </Grid>
  );
};

const NavigationHeaders = (props) => {
  const classes = useStyles();
  const { headers, className } = props;
  const [activeTab, setActiveTab] = React.useState('');

  const isActive = (headerId) => headerId === activeTab;

  return (
    <>
     <Grid container >
      {headers.map((header) => (
        <NavigationLink
          className={classnames(isActive(header.id) && classes.navigationLinkButtonActive)}
          key={header.id}
          onClick={() => setActiveTab(header.id)}
        >
          {header.title}
        </NavigationLink>
      ))}
     </Grid>
     {/* some content here shown base on activeTab */}
   </>
  );
};