How to change tabs width in material UI - reactjs

Question

I am using material UI tabs v0.20.0 for display content in tabular format. Tabs are taking full width. I have attached screenshot of expected and current output .
Expected output
Current Output
Please let me know a solution for the same.

Answer 1

If you want tabs of fixed width, you need to override the root css class passed to the Tab component, where you have to override both the minWidth and width attributes.
Example:
const Component = ({ classes }) => (
<Tabs value={0}>
<Tab classes={{ root: classes.tab }} label="One" />
<Tab classes={{ root: classes.tab }} label="Two" />
</Tabs>
);
// this is injected as classes prop into the wrapping component
const styles = {
tab: {
minWidth: 200, // a number of your choice
width: 200, // a number of your choice
}
};
export default withStyles(styles)(Component);

Answer 2

The Tabs component does accept a variant prop. One of the following string values are accepted:
fullWidth -> which is OPs current result
standard -> which is the default
scrollable -> adding scrolling functionality via buttons if not all tab items are visible
By now, the OPs expected result should be the default prop (standard).
Official Docs:
Tabs Guide: https://material-ui.com/components/tabs/
Tabs API: https://material-ui.com/api/tabs/

Answer 3

setting the minWidth to 50% does the job
<Tabs value={value} style={{backgroundColor:"#121858",color:"#FFF"}} onChange=
{handleChange} aria-label="simple tabs example" >
<Tab label="Tab One" {...a11yProps(0)} style={{minWidth:"50%"}}/>
<Tab label="Tab Two" {...a11yProps(1)} style={{minWidth:"50%"}}/>
</Tabs>

Answer 4

responsive solution :-
<Tabs variant="fullWidth"> </Tabs>

Answer 5

You're going to have to hardcode a tab width:
const width = 200;
const widthModifier = {
width: `${width}px`,
};
And then apply it to change the tab width:
<Tab label="Item One" style={widthModifier}>
You're also going to have to keep track of the current active tab using onActive and calculate the displacement of the ink bar yourself. Here's a full working example:
import React, { Component } from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';
const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400,
},
};
const width = 200;
const widthModifier = {
width: `${width}px`,
};
class TabWidth extends Component {
constructor(props) {
super(props);
this.state = { selectedIndex: 0 };
}
render() {
const { selectedIndex } = this.state;
// Notice that I have to calculate the left position of the ink bar here for things to look right
return (
<Tabs inkBarStyle={ {left: `${width * selectedIndex}px`, ...widthModifier}}>
<Tab label="Item One" style={widthModifier} onActive={() => this.setState({ selectedIndex: 0 })}>
<div>
<h2 style={styles.headline}>Tab One</h2>
<p>
You can put any sort of HTML or react component in here. It even keeps the component state!
</p>
</div>
</Tab>
<Tab label="Item Two" style={widthModifier} onActive={() => this.setState({ selectedIndex: 1 })}>
<div>
<h2 style={styles.headline}>Tab Two</h2>
<p>
This is another example tab.
</p>
</div>
</Tab>
</Tabs>
);
}
}
export default TabWidth;
But, you really should be using v1 if possible. In material-ui v1, your desired tab behavior is the default right out of the box and will scale based on screen size.

Answer 6

I had this question. You need to just simply add fullWidth to Tabs component link:
<Tabs variant="fullWidth" value={value} onChange={this.handleChange} aria-label="simple tabs example">
<Tab className={classes.root} label={t('login')} />
<Tab className={classes.root} label={t('register')} />
</Tabs>
it worked for me.