使用道具禁用材质UI选项卡指示器动画

Question

我的导航菜单使用Material UI选项卡。

我想在导航到另一条路由时禁用指示器的动画。

我知道有一个对象道具TabIndicatorProps。但是禁用动画的关键是什么呢?或者它不存在，我必须用CSS来做?

<Tabs
value={value}
TabIndicatorProps={{ ?? }}
>

Answer 1

看起来最简单的方法是使用CSS，像这样:

<Tabs
value={value}
TabIndicatorProps={{
style: {transition: 'none'}
}}
>

在4.11版本的Material UI上测试。我通过查看TabIndicator组件的源代码(版本4.x)发现了这一点。

这应该在材料5中工作。x，因为它也使用了transitionCSS属性，最新版本见源代码。

Answer 2

<Tabs
value={value}
TabIndicatorProps={{
style: { display: 'none' }
}}
>

如果要移除指示灯MUI标签，你需要给{display: "none"} prop在标签的TabIndicatorProps的prop。

在任何时候移除MUI Tabs指示器都能正常工作． 好运。

Answer 3

在mui5中，您可以这样做

<Tabs
sx={{ '& .MuiTabs-indicator': { display: 'none' } }}
>
</Tabs>