如果你想要固定宽度的标签，你需要覆盖root传递给Tab组件的css 类，你必须覆盖minWidth和width属性。

例子：

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);

该Tabs组件确实接受一个variantprops。接受以下字符串值之一：

• fullWidth -> 这是 OPs 当前结果
• 标准-> 这是默认值
• 可滚动-> 如果不是所有选项卡项都可见，则通过按钮添加滚动功能

到目前为止，OP 的预期结果应该是默认props（标准）。

官方文档：

• 标签指南：https : //material-ui.com/components/tabs/
• 标签 API：https : //material-ui.com/api/tabs/

将 minWidth 设置为 50% 就可以了

<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>

你将不得不硬编码一个标签宽度：

const width = 200;

const widthModifier = {
  width: `${width}px`,
};

然后应用它来更改选项卡宽度：

<Tab label="Item One" style={widthModifier}>

您还必须使用跟踪当前活动的选项卡onActive并自己计算墨条的位移。这是一个完整的工作示例：

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;

但是，如果可能，您确实应该使用 v1。在 material-ui v1 中，您所需的选项卡行为是开箱即用的默认行为，并将根据屏幕大小进行缩放。