调整 Material UI 应用栏中的标签宽度

Question

我是 Material UI 的新手，但它非常酷！但是，我想减小每个选项卡的宽度 panel/label，以便同时显示所有三个标签。

注意最后一个标签“上传”目前是如何从侧边栏上掉下来的。

我的 AppBar 基于 Material UI 的 this one。有什么建议吗？

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

Answer 1

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

处添加 className

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

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

查看示例here

Answer 2

我没有足够的分数来发表评论，但如果您注意到您的 codeSandbox，<Tabs /> 组件会正确调整到可用宽度。

您的问题可能是：

父组件有 overflow 并让 <Tabs /> 增长超出您的预期。
没有足够的 space 选项卡可以平均增长，因此根据 material ui 规范，它们应该是可滚动的。

您可以尝试使用 CSS API 减少制表符填充或遵守规范。我建议后者。

调整 Material UI 应用栏中的标签宽度

Adjusting Tab Width in Material UI App Bar

user-interface

tabs

appbar

reactjs

material-ui