How to customise Material UI Tab's indicator width and positioning

Question

I am using the Material ui's tabs and was able to make changes to the Tab's indicator. However, I am trying to reduce the width of the indicator to some fix width for each tab using styles. But it seems the indicator are positioned to left with some calculated value, and giving it a width doesn’t center align the indicator. Couldn't find appropriate solutions, kindly help me out. Here's the editable CodeSandbox.

Find below snippets:

1. Default fullwidth tabs. Indicator taking full width of the base button:

2. Width of indicator fixed, but not aligned to center below the tab label.

Trommel

Answer 1

Based on the docs, you need to attach a span element as the children of the indicator (using TabIndicatorProps). Then you could treat the indicator as a flex container, the span as a flex item with some fixed width.

Here's the component part:

<Tabs
  {...other}
  classes={{
    root: className,
    flexContainer: "flexContainer",
    indicator: "indicator"
  }}
  variant="fullWidth"
  TabIndicatorProps={{ children: <span /> }}
  centered
/>

Here's the styling part:

"& .indicator": {
  display: "flex",
  justifyContent: "center",
  backgroundColor: "transparent",
  "& > span": {
    maxWidth: 40,
    width: "100%",
    backgroundColor: "white"
  }
}

Demo code

Kilter

Answer 2

You can just simply add margin to the TabIndicatorProps like this:

        <Tabs
          value={value}
          onChange={handleChange}
          TabIndicatorProps={{
            sx: {
              width: "20% !important",
              marginLeft: "15%",
            },
          }}
          centered
        >

Lydalyddite