使用 ReactJS 在 Material-UI AppBar 中水平居中选项卡

Question

我正在使用 Material-UI 构建一个 React 应用程序，但无法弄清楚如何在蓝色 AppBar 中居中 3 个选项卡。目前，它们都是左对齐的，如下所示：

https://i.imgur.com/MjQIuBl.png(还不能嵌入图像，抱歉(

这是我的代码：

<div>
  {/* Tabs */}
  <AppBar position="static" color="primary" style={{ position: 'fixed' }}>
    <Tabs
      fullWidth={true}
      value={this.state.value}
      onChange={this.handleChange}
      indicatorColor="secondary"
    >
      <Tab label="Passenger" icon={Icons.seatIcon} component={Link} to="/passenger" />
      <Tab label="Driver" icon={Icons.driverIcon} component={Link} to="/driver" />
      <Tab label="Settings" icon={Icons.settingsIcon} component={Link} to="/settings" />
    </Tabs>
  </AppBar>
</div>

我已经从类似的问题中尝试了很多不同的CSS属性，但还没有接近。感谢您的帮助！

Answer 1

尝试将"居中"添加到选项卡组件，如下所示：

    <div>
  {/* Tabs */}
  <AppBar position="static" color="primary" style={{ position: 'fixed' }}>
    <Tabs
      fullWidth={true}
      value={this.state.value}
      onChange={this.handleChange}
      indicatorColor="secondary"
      centered
    >
      <Tab label="Passenger" icon={Icons.seatIcon} component={Link} to="/passenger" />
      <Tab label="Driver" icon={Icons.driverIcon} component={Link} to="/driver" />
      <Tab label="Settings" icon={Icons.settingsIcon} component={Link} to="/settings" />
    </Tabs>
  </AppBar>
</div>

Answer 2

如果 centered 属性不适合您，您可以尝试使用 CSS API(使用 Material-UI 3.7.0 进行测试(。如果您愿意，这也为您提供了更多的控制权：

import { Tabs, withStyles } from '@material-ui/core';
export const CenteredTabs = withStyles({
  flexContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
})(Tabs);

Answer 3

这可能会解决您在较新版本的 MUI 中的问题：

<Tabs
     sx={{ margin: "auto" }}
>