自定义Tabs点击结束后Ripple效果停止问题求助

问题核心是点击未选中标签时，状态切换导致Ripple元素被提前销毁/重置，只触发了按下阶段的动画。以下是两种可行的解决思路：

方案一：基于MUI内置Tab组件自定义（推荐） #

直接复用MUI的Tab和Tabs组件来定制样式，内置的Ripple逻辑会自动处理动画生命周期，避免手动管理的麻烦：

import { Tab, Tabs, Box, styled } from '@mui/material';
import { useState } from 'react';

// 自定义Tab样式
const StyledTab = styled(Tab)(({ theme }) => ({
  '&.Mui-selected': {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
  },
  '&:hover': {
    backgroundColor: theme.palette.primary.light,
  },
}));

export default function CustomTabs() {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabChange = (_, newValue: number) => {
    setActiveTab(newValue);
  };

  return (
    <Box sx={{ width: '100%', borderBottom: 1, borderColor: 'divider' }}>
      <Tabs value={activeTab} onChange={handleTabChange} aria-label="自定义标签页">
        <StyledTab label="标签一" />
        <StyledTab label="标签二" />
        <StyledTab label="标签三" />
      </Tabs>
    </Box>
  );
}

方案二：完全自定义Tab时手动控制Ripple #

如果必须完全自定义Tab结构，需要手动延迟状态切换，给Ripple动画留足完成时间：

import { useRipple, Box } from '@mui/material';
import { useState, useRef } from 'react';

const CustomTab = ({ label, isActive, onSelect }: { label: string; isActive: boolean; onSelect: () => void }) => {
  const tabRef = useRef<HTMLDivElement>(null);
  // 初始化Ripple钩子
  const ripple = useRipple(tabRef, { disabled: false });

  const handleClick = (e: React.MouseEvent) => {
    // 手动触发Ripple开始动画
    ripple.start(e);
    // 延迟300ms执行状态切换（匹配Ripple默认动画时长）
    setTimeout(() => {
      onSelect();
    }, 300);
  };

  return (
    <div
      ref={tabRef}
      onClick={handleClick}
      style={{
        padding: '12px 24px',
        cursor: 'pointer',
        backgroundColor: isActive ? '#1976d2' : 'transparent',
        color: isActive ? '#fff' : '#000',
        position: 'relative',
        overflow: 'hidden',
        transition: 'background-color 0.2s',
      }}
    >
      {label}
    </div>
  );
};

export default function App() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <Box sx={{ display: 'flex', borderBottom: '1px solid #e0e0e0' }}>
      {['标签一', '标签二', '标签三'].map((label, idx) => (
        <CustomTab
          key={idx}
          label={label}
          isActive={activeIndex === idx}
          onSelect={() => setActiveIndex(idx)}
        />
      ))}
    </Box>
  );
}

关键说明 #

• 方案一利用MUI内置的Ripple生命周期管理，无需额外处理动画中断问题，是最稳妥的方式。
• 方案二中的300ms延迟是匹配MUI Ripple默认的动画时长，确保动画完整播放后再切换标签状态，避免Ripple元素被提前销毁。

内容的提问来源于stack exchange，提问作者Thomas.B