如何调整 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

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

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

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

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

如何调整 material-ui 的标签

How to resize material-ui's tabs

reactjs

material-ui