材質 UI 選項卡不適用於滾動到

Question

當單擊帶有 Material UI 選項卡、UseRef 和 ScrollTo 的選項卡時，我試圖滾動到 div。

沙盒鏈接： https : //codesandbox.io/s/exciting-sound-mrw2v

當單擊 Tab 2 時，我希望滾動到 Tab2 Contents 和 Tab 1 內容在滾動時可見。目前它需要點擊兩次才能滾動到 div，我想知道為什么它落后於一次點擊。 任何線索表示贊賞。 謝謝！

Answer 1

我編輯了您的示例並添加了一個useEffect鈎子，如果您按下選項卡，則 2 正在滾動到此內容。

https://codesandbox.io/s/lingering-voice-y45cg

Answer 2

使用這種語法

 <Tabs
  classes={{ root: classes.root, scroller: classes.scroller }}
  value={active}
  onChange={(event, newValue) => {
    setActive(newValue);
  }}
  indicatorColor="primary"
  textColor="primary"
  variant={"scrollable"}
  scrollButtons={"on"}
>
  {cities.map((city, index) => (
    <Tab key={index} label={city} value={city} />
  ))}
</Tabs>

這兩行屬性很重要

variant={"scrollable"}
  scrollButtons={"on"}

完整示例鏈接： https : //codesandbox.io/s/material-ui-central-scrollable-tabs-ud26w?file=/ index.js: 645-1048