如何解决如何自定义Material UI Tab的指示器宽度和位置
我正在使用材料ui的标签页,并且能够更改标签页的指示器。但是,我试图使用样式将每个选项卡的指示器宽度减小到一些固定宽度。但是似乎指标的位置左移一些计算值,并且给它一个宽度不能使指标居中对齐。找不到合适的解决方案,请帮帮我。这是可编辑的CodeSandbox。
找到以下代码段:
解决方法
基于docs,您需要附加一个span
元素作为指标的子元素(使用TabIndicatorProps
)。然后,您可以将指标视为伸缩容器,将span
视为具有一定宽度的伸缩项。
这是组成部分:
<Tabs
{...other}
classes={{
root: className,flexContainer: "flexContainer",indicator: "indicator"
}}
variant="fullWidth"
TabIndicatorProps={{ children: <span /> }}
centered
/>
这是样式部分:
"& .indicator": {
display: "flex",justifyContent: "center",backgroundColor: "transparent","& > span": {
maxWidth: 40,width: "100%",backgroundColor: "white"
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。