材料 UI 选项卡左对齐问题



material-ui 的当前版本不支持组件中的左对齐选项卡。我看到了一个解决方法 https://github.com/callemall/material-ui/issues/4420

这是我的实现 https://www.webpackbin.com/bins/-KpxVgwKOLPfM8CFcu5-

但是,当选择第一个选项卡时,选项卡栏会扭曲,并且高度超过预期。

左对齐

选项卡组件的初始迁移已合并到下一个分支上。 该功能已实现,现在是默认行为。 感谢您提供这些详细信息。

这是 v1-beta 中支持的功能

修复高度问题

选项卡栏扭曲,并且高度高于预期。

headline: {{ marginTop: '0px' }}

请参阅:评论

使用填充

我想在选项卡结束后有一个容器边距。

选项卡结构对我来说真的很奇怪,由于某种原因你不能使用边距,
请尝试使用填充:

contentContainerStyle={{ paddingTop:'50px' }}

设置宽度

不要在tabItemContainerStyle中设置宽度,请改用包装器:

<div calssName='wrapper' style={{ width: '500px' }} /> 
<Tabs {...}/>
</div>

示例(网络包装箱(

最新更新