Material UI Tabs侧边栏伸缩时指示器位置偏移，修复无效求助

我在页面中使用了Material UI Tabs组件，右侧带有侧边栏。当展开或收起侧边栏时，激活标签的指示器位置发生偏移。我查到官方在Tabs组件中添加了action属性来解决这类布局变化导致的指示器错位问题，但按照示例代码尝试后并未生效，请问该如何解决？

尝试过的修复代码 #

function MyTabs() {
  const tabsActions = React.useRef();

  React.useEffect(() => {
    if (tabsActions.current) {
      tabsActions.current.updateIndicator();
    }
  }, []);

  return <Tabs action={tabsActions}>{items}</Popover>;
}

我的Tabs组件代码 #

export const BasicTab = (props: TabProps) => {
  const { data, disabled, type, actions } = props;
  const [value, setValue] = useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  const tabsActions = React.useRef<any>();

  React.useEffect(() => {
    if (tabsActions.current) {
      tabsActions.current.updateIndicator();
    }
  }, []);

  return (
    <>
      <StyledTabs
        action={tabsActions}
        value={value}
        onChange={handleChange}
        aria-label="basic tabs example"
        className={type}
        variant="scrollable"
        scrollButtons={false}
      >
        {data?.map((item: TabItemType) => {
          return (
            <Tab
              key={item.id}
              label={item.name}
              disabled={item.disabled}
              disableRipple={item.disableTabRipple}
              {...props}
            />
          );
        })}
      </StyledTabs>

      {data?.map((item: TabPanelItemType) => {
        return (
          <TabPanel value={value} key={item.id} index={item.id}>
            {item.component}
          </TabPanel>
        );
      })}
    </>
  );
}

指示器偏移效果 #

解决方案 #

你的问题出在useEffect的依赖项上——当前只在组件挂载时执行一次updateIndicator()，但侧边栏展开/收起属于布局变化，并不会触发这个useEffect。需要在布局改变时重新调用指示器更新方法，以下是几种可行方案：

• 监听侧边栏状态变化
  如果侧边栏的展开/收起状态（比如isSidebarOpen）是通过props传入的，把它加入useEffect的依赖数组，确保布局变化后立即更新指示器：

  // 假设props包含isSidebarOpen状态
  const { data, disabled, type, actions, isSidebarOpen } = props;
  
  React.useEffect(() => {
    if (tabsActions.current) {
      // 用setTimeout确保DOM布局完成后再执行更新
      setTimeout(() => {
        tabsActions.current.updateIndicator();
      }, 0);
    }
  }, [isSidebarOpen]);
  

• 监听窗口尺寸变化（通用方案）
  若无法直接获取侧边栏状态，可监听窗口resize事件——侧边栏展开/收起通常会改变窗口可用宽度，触发resize事件：

  React.useEffect(() => {
    const handleResize = () => {
      if (tabsActions.current) {
        tabsActions.current.updateIndicator();
      }
    };
  
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  

• 检查自定义样式干扰
  你使用了StyledTabs自定义样式，需确认没有修改position、width、padding等会影响指示器位置计算的属性。如果自定义样式破坏了Tabs的默认布局逻辑，需调整样式，或在样式更新后手动调用updateIndicator()。

• 确认Material UI版本
  确保你使用的是v5及以上版本的Material UI，action属性和updateIndicator()方法是在较新版本中引入的，旧版本可能不支持。

内容的提问来源于stack exchange，提问作者Mohammad Reza Salemi