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

Material UI 简介

Material UI is an open-source React component library that implements Google's Material Design.

It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box.

Material UI is beautiful by design and features a suite of customization options that make it easy to implement your own custom design system on top of our components.

Material UI是一个开源的React组件库，实现了Google的材质设计。

它包括一个全面的预构建组件集合，可直接用于生产。

Material UI设计美观，具有一套定制选项，可在我们的组件之上轻松实现您自己的定制设计系统。

Advantages of Material UI

• Ship faster: thousands of open-source contributors have poured countless hours into these components. Focus on your core business logic instead of reinventing the wheel—we've got your UI covered.
• Beautiful by default: we're meticulous about our implementation of Material Design, ensuring that every Material UI component meets the highest standards of form and function, but diverge from the official spec where necessary to provide multiple great options.
• Customizability: the library includes an extensive set of intuitive customizability features. The templates in our store demonstrate how far you can go with customization.
• Cross-team collaboration: Material UI's intuitive developer experience reduces the barrier to entry for back-end developers and less technical designers, empowering teams to collaborate more effectively. The design kits streamline your workflow and boost consistency between designers and developers.
• Trusted by thousands of organizations: Material UI has the largest UI community in the React ecosystem. It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. You can count on community's support for years to come (e.g. Stack Overflow)

​材料UI的优势

发布速度更快：成千上万的开源贡献者已经为这些组件投入了无数的时间。关注您的核心业务逻辑，而不是重新发明轮子，我们已经涵盖了您的UI。

默认情况下很漂亮：我们对材料设计的实现非常仔细，确保每个材料UI组件都符合形式和功能的最高标准，但在必要时偏离官方规范，以提供多个很棒的选项。

可定制性：该库包括一系列直观的可定制功能。我们商店中的模板展示了您可以进行定制的程度。

跨团队协作：Material UI直观的开发人员体验减少了后端开发人员和技术较少的设计师进入的障碍，使团队能够更有效地协作。设计套件简化了您的工作流程，提高了设计人员和开发人员之间的一致性。

受到数千家组织的信任：Material UI在React生态系统中拥有最大的UI社区。它的历史可以追溯到2014年，我们将长期参与其中。您可以在未来几年依靠社区的支持（例如，堆栈溢出）。

​

​

 

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