How to change tab headers width (vertical tabs) for Semantic-UI React

Question

I'm using Semantic-UI React.

<Tab
  menu={{
    fluid: true,
    vertical: true,
    tabular: true
  }}
  panes={this.getTabPanes()}
/>

It works fine, but Tab headers are two wide.

How to change it to the absolute value (100px for example)?

Answer 1

If you take a look at the docs for Tab, there is a prop called grid that accepts an object with two values for those grid column widths. For instance, you can pass this and it will change the size grid={{paneWidth: 6, tabWidth: 2}}