Disable Material UI Tabs indicator animation with a prop

user_4822666 0
Viewed 2169

I am using Material UI tabs for my navigation menu.

I want to disable the animation from the indicator when navigating to another route.

I know there is a object prop TabIndicatorProps. But what is the key inside it to disable the animation? Or is it not there and do I have to do it with CSS?

<Tabs
 value={value}
 TabIndicatorProps={{ ?? }}
>
material-ui reactjs tabs
1 Answers

Looks like the easiest way to do this is with CSS, like this:

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

Tested on Material UI version 4.11. I found this by looking at source code (version 4.x) for the TabIndicator component.

This should work in Material 5.x, because it also uses transition CSS property, see source code for latest version.

user_15789750
Related