如何使可滚动选项卡居中？

Question

有 3 个选项卡，我无法将它们放在屏幕中央。如何使可滚动选项卡居中？截至目前，它只会出现在屏幕的左侧

codesandbox：https://codesandbox.io/s/material-demo-forked-dbcxl?file =/demo.js

下面是代码：

import * as React from "react";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Box from "@mui/material/Box";

export default function ScrollableTabsButtonAuto() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Tabs
      value={value}
      onChange={handleChange}
      variant="scrollable"
      scrollButtons="auto"
      aria-label="scrollable auto tabs example"
      centered
    >
      <Tab label="Item One" />
      <Tab label="Item Two" />
      <Tab label="Item Three" />
    </Tabs>
  );
}

Answer 1

这是因为Tabs的容器与Tabs的宽度相同。

您应该能够使用全宽的Box来包裹 Tabs 组件。

例如，

<Box display="flex" justifyContent="center" width="100%">
  <Tabs ...>
  ...
  </Tabs>
</Box>