材料UI主动选项卡中心对齐

Question

有可能在屏幕的水平中心放置活动选项卡，除了选择第一个或最后一个选项卡的情况外吗？

        <Tabs 
          className={classes.tabs}
          indicatorColor='primary'
          scrollButtons='auto'
          textColor='primary'
          value={activeTab}
          variant='scrollable'
        >
          {tabs.map(({ label, url, icon = '', id, action } => (
            <Tab
              key={id}
              label={label}
              icon={icon}
              onClick={onClick}
            />
          ))}
        </Tabs>

activeTab

是根据当前路径计算的。

onClick

只需通过单击选项卡ID

按下路径变化

活动标签不在中央屏幕截图中

中心屏幕截图中的活动选项卡 单击选项卡之后，可以自动进行第二个示例情况？

是的，这是可能的。您只需要创建一个运行AonClick的事件（或在Vanilla JavaScript A and

onclick

事件中）即可。它正在运行的是隐藏的选项卡并显示要显示的选项卡，只要索引不是0而不是长度-1.

Answer 1

function

并触发它。

这种感觉有点笨拙，但是我能够通过HTML元素的

scrollintoviewmethot.

。

要使以初始负载为中心的活动选项卡，您可以将REF与最初活跃的选项卡一起使用，以及一个：

function

：

function

选择新选项卡之后，您还可以在每个选项卡中添加一个on Click将其滚动到中心：

useEffect

Answer 2

Mui已经尝试在该情况下滚动到视图中，并且由于通过

const initialTabRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  const tempScrollY = window.scrollY;
  initialTabRef.current?.scrollIntoView({
    behavior: "instant",
    block: "nearest", // no need to vertically-center the tab
    inline: "center", // horizontally-center it within its parent
  });
  // really janky, but instantly scrolling back to our tempScrollY is a way to appear to avoid vertical scrolling from `scrollIntoView`
  window.scrollTo({ top: tempScrollY, behavior: "instant" });
}, []);

// ...
<Tab
  ref={initialSelectedTab}
  //... other tab props
  />

实现了，我不确定如何在不更改MUI逻辑本身的情况下覆盖它。