react使用Material UI实现类似淘宝tab居中切换效果

​​https://mui.com/zh/material-ui/react-tabs/#api​​

Index.js:

import React, { Suspense } from 'react'
import { connect } from 'react-redux'
import { withRouter, Switch } from 'react-router-dom'
import { Tabs, Tab, Box } from '@mui/material'
import useList from './useList'
import { Loading } from '../../../../components/light'
import { SinglePageHeader } from '../../../../components/light'

import './index.css'

function Index(props) {
  // eslint-disable-next-line
  const { routeDom, filterRouteArr, tabsValue, handleTabsChange } = useList(props)


  return (
    <div>
      <div className="m-single-wrap">
        <div className="m-single-inner">
          <SinglePageHeader></SinglePageHeader>
          <Box sx={{ bgcolor: 'background.paper' }}>
            <Tabs
              value={tabsValue}
              onChange={handleTabsChange}
              variant="scrollable"
              scrollButtons={false}
              // allowScrollButtonsMobile={true}
              // centered={true}
              className="m-mui-tabs"
            >
              {filterRouteArr.map((item, index) => (<Tab key={index} id={`m-tab-${index}`} label={item.title} />))}
            </Tabs>
          </Box>
          <Suspense fallback={<Loading isLazyLoading={true}></Loading>}>
            <Switch>{routeDom}</Switch>
          </Suspense>
        </div>
      </div>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
    collapsed: state.getIn(['light', 'collapsed']),
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onSetState(key, value) {
      dispatch({ type: 'SET_LIGHT_STATE', key, value })
    },
    onDispatch(action) {
      dispatch(action)
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Index))

useList.js:

import { useState, useEffect, lazy } from 'react'
import { Route, Redirect } from 'react-router-dom'
import Api from '../../../../api'

export default function useList(props) {
  // eslint-disable-next-line
  const [groupButton1, setGroupButton1] = useState([])
  const [routeDom, setRouteDom] = useState()
  const [filterRouteArr, setFilterRouteArr] = useState([])
  const [tabsValue, setTabsValue] = useState(0)



  const handleTabsChange = (event, newValue) => {
    setTabsValue(newValue)
    document
      .getElementById(`m-tab-${newValue}`)
      .scrollIntoView({ behavior: 'smooth', inline: 'center' })
  } 

  useEffect(() => {
    const routeArr = [
      {
        title: '消息私信',
        path: '/h5/single/me/privateMessage',
        component: lazy(() => import('../../single/me/empty/Index')),
      },
      {
        title: '点赞',
        path: '/h5/single/me/like',
        component: lazy(() => import('../../single/me/empty/Index')),
      },
      {
        title: '收藏',
        path: '/h5/single/me/collect',
        component: lazy(() => import('../../single/me/collect/Index')),
      },
      {
        title: '浏览历史',
        path: '/h5/single/me/history',
        component: lazy(() => import('../../single/me/empty/Index')),
      },
      {
        title: '兑换',
        path: '/h5/single/me/exchange',
        component: lazy(() => import('../../single/me/exchange/Index')),
      },
    ]
    const filterRouteArr = routeArr
    .filter(
      (item) =>
        groupButton1.findIndex(
          (groupButton1Item) => groupButton1Item.path === item.path
        ) >= 0
    )

    const routeDom = filterRouteArr
      .map((item) => (
        <Route
          key={item.path}
          path={item.path}
          component={item.component}
        ></Route>
      ))
    if (routeDom.length > 0) {
      routeDom.push(
        <Redirect key={'redirect'} from="*" to="/404" exact></Redirect>
      )
    }
    setRouteDom(routeDom)
    setFilterRouteArr(filterRouteArr)
  }, [groupButton1])

  useEffect(() => {
    Api.h5.configGetMeData().then((res) => {
      if (res.code === 200) {
        setGroupButton1(res.data.me.groupButton1)
      }
    })
    // eslint-disable-next-line
  }, [])

  return {
    routeDom,
    filterRouteArr,
    tabsValue,
    handleTabsChange,
  }
}

css:

.m-mui-tabs .Mui-selected{color: #f04142!important;}
.m-mui-tabs .css-1aquho2-MuiTabs-indicator{background-color: #f04142!important;}