如何调整Material-UI的标签

Question

我正在尝试获得如下所示的结果（图片来自https://material.google.com/components/tabs.html#tabs-usage ）：

我不希望选项卡占用页面宽度的100％，因为默认情况下，material-ui会使用该选项卡。 通过material-ui的实现可以做到这一点吗？ 我已经使用style选项卡属性来处理每个选项卡的宽度，但是inkbare似乎被硬编码为根据所选选项卡的ID使用百分比，因此不能正确地对调整大小的选项卡加下划线。 有解决方法吗？

Answer 1

存在与此问题相关的问题https://github.com/callemall/material-ui/issues/1203

但是，是的，有一个简单的解决方法。 （不幸的是，它不支持跨选项卡的不同宽度）。 您可以使用Tabs tabItemContainerStyle属性设置标签容器的宽度（将每个标签的宽度乘以标签数）。
由于背景颜色是在该元素上设置的，因此您将需要覆盖其他两个Tabs属性的style （ style和contentContainerStyle ）。

在此示例中，Im为style属性（用于整个组件）设置与我的选项卡相同的颜色，并将contentContainerStyle设置回白色背景。
您也可以使用classes属性。

例如：（假设您有一个蓝色的工具栏）

<Tabs 
  tabItemContainerStyle={{width: '400px'}}
  style={{background: 'blue'}}
  contentContainerStyle={{background: '#FFF'}} >