Javascript 如何将ReactJs（Web平台）中可滚动选项卡的活动选项卡居中对齐

我有8项在滑动标签从左向右滑动或从右向右滑动时，所选活动选项卡的中心位置应与play store top bar完全相同。请帮助我在Web平台中如何执行此操作。我正在使用材质UI组件。 请遵循以下参考：

另外，请告诉我如何添加自定义css，如更改转移持续时间，悬停颜色等

我正在共享经过一些修改的代码：

import React from 'react';
import PropTypes from 'prop-types';
import SwipeableViews from 'react-swipeable-views';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`scrollable-auto-tabpanel-${index}`}
      aria-labelledby={`scrollable-auto-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
};

function a11yProps(index) {
  return {
    id: `scrollable-auto-tab-${index}`,
    'aria-controls': `scrollable-auto-tabpanel-${index}`,
  };
}

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    flexGrow: 1,
    width: '100%',
  },
}));

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

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

  const handleChangeIndex = (index) => {
    setValue(index);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="primary"
          textColor="primary"
          variant="scrollable"
          scrollButtons="auto"
          aria-label="scrollable auto tabs example"
          style={{alignItems: 'center'}}
        >
          <Tab style={{marginLeft: 20}} label="Item One" {...a11yProps(0)} />
          <Tab style={{marginLeft: 20}} label="Item Two" {...a11yProps(1)} />
          <Tab style={{marginLeft: 20}} label="Item Three" {...a11yProps(2)} />
          <Tab style={{marginLeft: 20}} label="Item Four" {...a11yProps(3)} />
          <Tab style={{marginLeft: 20}} label="Item Five" {...a11yProps(4)} />
          <Tab style={{marginLeft: 20}} label="Item Six" {...a11yProps(5)} />
          <Tab style={{marginLeft: 20}} label="Item Seven" {...a11yProps(6)} />
          <Tab style={{marginLeft: 20}} label="Item Eight" {...a11yProps(7)} />
        </Tabs>
      </AppBar>
      <SwipeableViews
        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
        index={value}
        onChangeIndex={handleChangeIndex}
      >
        <TabPanel value={value} index={0} dir={theme.direction}>
          Item One
        </TabPanel>
        <TabPanel value={value} index={1} dir={theme.direction}>
          Item Two
        </TabPanel>
        <TabPanel value={value} index={2} dir={theme.direction}>
          Item Three
        </TabPanel>
        <TabPanel value={value} index={3} dir={theme.direction}>
          Item Four
        </TabPanel>
        <TabPanel value={value} index={4} dir={theme.direction}>
          Item Five
        </TabPanel>
        <TabPanel value={value} index={5} dir={theme.direction}>
          Item Six
        </TabPanel>
        <TabPanel value={value} index={6} dir={theme.direction}>
          Item Seven
        </TabPanel>
        <TabPanel value={value} index={7} dir={theme.direction}>
          Item Eight
        </TabPanel>
      </SwipeableViews>
    </div>
  );
}

从“React”导入React；
从“道具类型”导入道具类型；
从“react SwipeableView”导入SwipeableView；
从“@materialui/core/styles”导入{makeStyles，useTheme}；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Tabs”导入选项卡；
从“@material ui/core/Tab”导入选项卡；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Box”导入框；
功能选项卡面板（道具）{
const{children，value，index，…other}=props；
返回(
{value===索引&&(
{儿童}
)}
);
}
TabPanel.propTypes={
子项：PropTypes.node，
索引：PropTypes.any.isRequired，
值：PropTypes.any.isRequired，
};
功能a11yProps（索引）{
返回{
id:`scrollable auto tab-${index}`，
“aria控件”：“可滚动自动选项卡面板-${index}”，
};
}
const useStyles=makeStyles（（主题）=>({
根目录：{
背景色：theme.palete.background.paper，
flexGrow:1，
宽度：“100%”，
},
}));
导出默认函数ScrollableTabsButtoAuto（）{
const classes=useStyles（）；
const theme=useTheme（）；
const[value，setValue]=React.useState（0）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
常量handleChangeIndex=（索引）=>{
设定值（索引）；
};
返回(
项目一
项目二
项目三
项目四
项目五
项目六
项目七
项目八
);
}

最后一个针对react native的Ant设计示例具有您想要的行为：

---

您可以尝试使用它，而不是编辑不适用于此行为的组件。

Ant design for react native的最后一个示例具有您要查找的行为：

---

您可以尝试使用它，而不是编辑不适用于此行为的组件。

谢谢您，先生，我刚刚检查过，是的，我正是在谈论这个问题。但他们的设计不是我想要的。有没有办法在可滚动的选项卡中实现这些功能？？？我真的想把它用于我的工作。请帮忙----@昆汀瑞斯谢谢你，先生，我刚检查过，是的，我正是在说这个。但他们的设计不是我想要的。有没有办法在可滚动的选项卡中实现这些功能？？？我真的想把它用于我的工作。请帮忙----@昆廷里塞尔