reactjs - 使用可滚动变体并调整浏览器窗口大小时，材质 UI 选项卡将消失

Question

我正在使用 Material UI V4 和 React V17。

我使用带有“可滚动”变体的选项卡，因为我希望有一个响应式页面。当页面为 md 大小及以上时，将显示完整的标签栏，并且不需要滚动按钮。当页面为 md 大小并向下时，一些选项卡将被隐藏，但会显示滚动按钮，以便用户可以滚动选项卡栏并查看所有选项卡以访问网页的不同部分。

当将浏览器页面的大小调整为显示可滚动选项卡栏的大小，并选择一个将隐藏第一个选项卡的选项卡时，就会出现问题，因为大小和滚动。在此之后，当最大化页面时，我会看到第一个选项卡将消失，除非我刷新页面或一直离开滚动按钮，否则我无法访问它。始终保留滚动按钮不是一种选择，因为即使没有滚动可用，它们也会显示，并且可能会使用户感到困惑。

我尝试将变体形式“可滚动”更改为“标准”甚至“全宽度”，将滚动按钮更改为“自动”，这两个道具都会根据浏览器页面的大小更改它们，但没有成功。

这里有一些屏幕截图显示正在发生的事情。

减员前：

缩小后：

最大化后：

选项卡 1 无处可见。

它应该像第一个屏幕截图。

这是我的代码：

return (
    <div id="right" className={classesLA.divWidth}>
      {!addresses.active && !isOpenAccess.access && <ShowExampleFab />}
      <div style={{ height: "100%" }}>
        <SummaryPrice rawData={summaryPrice} setRawData={setSummaryPrice} />
        <div ref={tabsDiv} style={{ paddingTop: 3 }}>
          <AppBar
            className={classes.header}
            color={isDarkTheme ? "" : "secondary"}
          >
            <Tabs
              value={value}
              isDarkTheme={isDarkTheme}
              onChange={handleChange}
              indicatorColor="primary"
              textColor="primary"
              variant="scrollable"
              scrollButtons={isLeptopScreen ? "on" : "off"}
              TabScrollButtonProps={{ disabled: false }}
            >
              <Tab
                label="Tab 1"
                isDarkTheme={isDarkTheme}
                onClick={() =>
                  handleSwitch(
                    isDemo
                      ? Routes.demoSummary
                      : isListings
                      ? Routes.listingsSummary
                      : Routes.dashboardSummary,
                    0
                  )
                }
              />
              <Tab
                label="Tab 2"
                disabled={
                  isOpenAccess.page === "/id" ||
                  summaryPrice?.property_details.details[0] ===
                    PROPERTY_TYPE_LAND
                }
                isDarkTheme={isDarkTheme}
                onClick={() =>
                  handleSwitch(
                    isDemo ? Routes.demoSky : Routes.dashboarSky,
                    1
                  )
                }
              />
              <Tab
                label="Tab 3"
                isDarkTheme={isDarkTheme}
                onClick={() =>
                  handleSwitch(
                    isDemo
                      ? Routes.demoImpact
                      : isListings
                      ? Routes.listingsImpact
                      : Routes.dashboardImpact,
                    2
                  )
                }
              />
              <Tab
                label="Tab 4"
                isDarkTheme={isDarkTheme}
                onClick={() =>
                  handleSwitch(
                    isDemo
                      ? Routes.demoComparisons
                      : isListings
                      ? Routes.listingsComparisons
                      : Routes.dashboardComparisons,
                    3
                  )
                }
              />
              <Tab
                label="Tab 5"
                isDarkTheme={isDarkTheme}
                onClick={() =>
                  handleSwitch(
                    isDemo
                      ? Routes.demoPay
                      : isListings
                      ? Routes.listingsPay
                      : Routes.dashboardPay,
                    4
                  )
                }
              />
              <Tab
                label="Tab 6"
                isDarkTheme={isDarkTheme}
                onClick={() =>
                  handleSwitch(
                    isDemo
                      ? Routes.demoJump
                      : isListings
                      ? Routes.listingsJump
                      : Routes.dashboardJump,
                    5
                  )
                }
              />
              <Tab
                label="Tab 7"
                isDarkTheme={isDarkTheme}
                onClick={() =>
                 handleSwitch(
                    isDemo
                      ? Routes.demoRights
                      : isListings
                      ? Routes.listingsRights
                      : Routes.dashboardRights,

                    6
                  )
                }
              />
              <Tab
                label=""
                className={classes.headerTab}
                isDarkTheme={isDarkTheme}
                disabled
              />
              <Tab
                label=""
                className={classes.headerTab}
                isDarkTheme={isDarkTheme}
                disabled
              />
              <Tab
                label=""
                className={classes.headerTab}
                isDarkTheme={isDarkTheme}
                disabled
              />
            </Tabs>
          </AppBar>

标签： reactjsmaterial-ui