如何调整material-ui标签的大小

Question

我试图得到这样的结果（图片来自https://material.google.com/components/tabs.html#tabs-usage）：

我不希望标签占据页面宽度的100％，因为它默认使用material-ui。是否可以通过材料-ui的实现来实现这一点？我已经使用style标签属性播放了每个标签的宽度，但是墨迹似乎是硬编码的，根据所选标签的ID使用百分比，因此不会正确地为调整大小的标签加下划线。有解决方法吗？

Answer 1

此问题与https://github.com/callemall/material-ui/issues/1203

有关

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

在此示例中，我设置与style属性中的标签相同的颜色（对于整个组件）并将contentContainerStyle设置回白色背景。
您也可以使用类属性..

Ex :(想象一下，你有一个蓝色的工具栏）

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