The MUI Tabs component renders an indicator that gives a visual cue of which tab is selected. This indicator can be easily sized and styled in MUI v5 by using TabIndicatorProps
.
In this demo I will show what values TabIndicatorProps
accepts and how to change width, height, and color of the tab indicator.

Here are additional useful resources:
- Complete guides to MUI ‘sx’ prop, styled components, and makeStyles
- How to Remove the Tab Indicator (and Style Tabs)
- How to Customize Material UI AppBar Color and Styling
- The Best MUI Tabs Tutorial: Hover, Active, Focus, and onClick
Here’s a link to the YouTube version of this post or watch it below:
MUI Tab Indicator Props
The Material-UI Tabs component controls the tab indicator that appears under each tab. The Tabs component has a prop called TabIndicatorProps that can be passed any prop that a HTMLElement TypeScript type can accept. It can also accept the new MUI 5 sx
prop.

I passed title
and hidden
to TabIndicatorProps. The title
prop renders a small HTML tooltip when the element is hovered. The hidden
prop is a very useful way of hiding the component without CSS.
TabIndicatorProps={{
title: "indicator",
//hidden: true
}}
I unhid the tab indicator for this demo.
MUI Tab Indicator Color
The tab indicator element color can be customized by passing backgroundColor
to the sx prop:
TabIndicatorProps={{
sx: { backgroundColor: "red" }
}}
Notice that I had to pass backgroundColor
, not simply the color
prop. The tab indicator gives a visual cue simply by having it’s entire area filled with a color.
MUI Tab Indicator Width and Height
By default the tab indicator is 2px tall. I doubled this to add a thickness to the indicator. Notice that the shorthand of 4
is accepted and translates to px.
TabIndicatorProps={{
sx: { height: 4 } //width: "25% !important"
}}
MUI tab indicator width is calculated internally and applied with inline styling so that it is difficult to override:

I show above how this can be overridden with !important
, but I don’t recommend overriding it. You would need to figure out whatever internal MUI calculation is occurring and then adjust that somehow to make custom width useful.
MUI Tab Indicator Classes
The most important default class that MUI applies to the tab indicator element is MuiTabs-indicator
. If you are using MUI v5, you shouldn’t need to target this class and instead you can simply style using TabIndicatorProps.sx.
If you are stil using Material-UI v4, then the MuiTabs-indicator
class may be useful for nested selectors and styling.
Thank you! I found this resource content helpful and it helped me overcome the issue I was faced with ?. Kudos…..
I was trying to target the MuiTab in it’s active state inorder to make some styling changes… with your explanation, I got to know it was the .Mui-selected I needed to target
I’m glad the post helped!