How to resize material-ui's tabs

Question

I am trying to get a result looking like this (picture taken from https://material.google.com/components/tabs.html#tabs-usage):

I don't want the tabs to take 100% of the width of the page, as it is by default with material-ui. Is it possible to do this with the implementation of material-ui ? I already played with the width of each tab using the style tab property, but the inkbare seems hardcoded to use percentages according to the id of the selected tab, and therefore doesn't underline properly the resized tabs. Is there a workaround?

Answer 1

There is an issue related to this problem https://github.com/callemall/material-ui/issues/1203

But yes, there is an easy workaround. (unfortunately it doesnt support diffrent widths across the tabs). You can use the Tabs tabItemContainerStyle property to set the width of the tabs container (make it the width you want to each tab times the number of tabs).
Since the background color is setted on that element, you're gonna need to override the styles for two others Tabs properties (style and contentContainerStyle).

In this example Im setting the same color as my tabs in the style property (for the whole component) and setting the contentContainerStyle back to a white background.
You could use the classes properties as well..

Ex: (Imagine you have a blue toolbar)

<Tabs 
  tabItemContainerStyle={{width: '400px'}}
  style={{background: 'blue'}}
  contentContainerStyle={{background: '#FFF'}} >