如何删除material-ui的可滚动选项卡中的多余空间？

Question

看一下这个例子：

https://material-ui.com/demos/tabs/#scrollable-tabs

如果没有箭头，如何删除这个额外的空间：

谢谢。

Answer 1

TabScrollButton \xc2\xa0component 负责显示箭头。您可以对其应用自定义样式。如果您只是隐藏箭头，整个选项卡菜单都会跳转。我建议只减少箭头的宽度，这样间隙就不会那么宽。然而，如果您坚持完全隐藏它们，我们可以应用一些过渡并将非活动箭头的宽度减少到 0。

\n

import TabScrollButton from '@material-ui/core/TabScrollButton';\nimport { withStyles} from '@material-ui/core/styles';\n\nconst MyTabScrollButton = withStyles(theme => ({\n  root: {\n    width: 28,\n    overflow: 'hidden',\n    transition: 'width 0.5s',\n    '&.Mui-disabled': {\n      width: 0,\n    },\n  },\n}))(TabScrollButton);\n\n<Tabs \n  ScrollButtonComponent={MyTabScrollButton}\n  variant="scrollable"\n  scrollButtons="auto"\n>\n

\n