reactjs - 如何调整material-ui选项卡的大小

Question

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

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

Answer 1

有一个与此问题相关的问题 https://github.com/callemall/material-ui/issues/1203

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

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

例如:(假设您有一个蓝色的工具栏)

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