使用 prop 禁用 Material UI Tabs 指示器动画

Question

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

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

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

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

Answer 1

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

如果你想删除MUI Tab的指示器，你需要在 Tabs 的 TabIndicatorProps 属性中添加 {display: "none"} 属性。

它将随时正常工作以删除MUI Tabs的指示器。祝你好运。

Answer 2

看起来最简单的方法是使用 CSS，如下所示：

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

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

这应该适用于 Material 5.x，因为它也使用transitionCSS 属性，请参阅最新版本的源代码。