css - 使用 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

尝试向 Tabs 组件添加“居中”，如下所示:

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