How to change tabs width in material UI

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 componentconst styles = {    tab: {        minWidth: 200, // a number of your choice        width: 200, // a number of your choice    }};export default withStyles(styles)(Component);

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/

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>