时间戳

首页 > 解决方案 > 在 Material UI 应用栏中调整标签宽度

reactjs - 在 Material UI 应用栏中调整标签宽度

问题描述

我对 Material UI 很陌生，但它非常酷！但是，我想减小每个选项卡面板/标签的宽度，因此所有三个标签都会同时出现。

请注意最后一个标签 Upload 当前是如何从侧边栏中脱落的。 在此处输入图像描述

我的 AppBar 基于Material UI 中的这个。有什么建议么？

我基本上是在尝试减少“第一页”、“第二页”和“第三页”之间的示例中的间距

标签： reactjsuser-interfacetabsmaterial-uiappbar

解决方案

您可以从<Tabs>的属性中删除variant="fullWidth"。你可以className在你的<LinkTab className={classes.customTab}

然后你可以在你的useStylesas添加任何你想要的宽度minWidth。

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
  customTab: {
    minWidth: 50
  }
}));

在此处查看示例

推荐阅读