How to force tab to fit to small space in Material UI?

Question

As per doc, I tried fullWidth, centered for tabs, Does not seem to work. How do force tabs to re-adjust to given screen size ?

I am using latest beta v23

Answer 1

I think the easiest way to force the tabs to fit a smaller container width, would be:

<Tab style={{ minWidth: 50 }} label="item" />

The default minimums are 160px for medium-and-up, 72px for small-and-down screen sizes.

Depending on how small the fit should be, you can also do other kinds of overrides on padding and font. I tried out a few techniques on CodeSandbox.

Remember, the more we compact the tabs, the worse usability. There should be other workarounds too! For instance, shortening the label texts, using icons, or restructuring.