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

Question

我试图得到一个看起来像这样的结果(图片来自https://material.google.com/components/tabs.html#tabs-usage):

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

Answer 1

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

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

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

例如:(想象一下,你有一个蓝色的工具栏)

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