反应导航栏滚动按钮以查看溢出选项卡

Question

我想制作一个导航栏，例如Material-UI的Scrollable Tabs（自动滚动按钮） ）：https://material-ui.com/components/tabs/

如何隐藏选项卡和“切换”视图的溢出以单击按钮显示溢出？对于样式，我使用样式化的组件，并且div样式化为内联块

Navbar.js

import React, { useState } from 'react';
import Tab from './Tab';
import { StyledTabs } from '../styledComponents/StyledNavbar';
import { NavbarOutline } from '../styledComponents/StyledNavbar';

const Navbar = ({ children }) => {
  const [activeTab, setActiveTab] = useState(children[0].props.label);

  const onClickTabItem = tab => {
    setActiveTab(tab);
  }

  return (
    <>
      <NavbarOutline>
        <ol>
          {children.map(child => {
            const { label } = child.props;
            return <Tab activeTab={activeTab} key={label} label={label} handleClick={onClickTabItem} />;
          })}
        </ol>
      </NavbarOutline>
      <div>
        {children.map(child => {
          if (child.props.label !== activeTab) return undefined;
          return <StyledTabs className="content">{child.props.children}</StyledTabs>
        })}
      </div>
    </>
  );
}

export default Navbar;

Tab.js

import React from 'react';
import { StyledTabs } from '../styledComponents/StyledNavbar';

const Tab = props => {
  const { activeTab, label, handleClick } = props;
  let className = 'not-active';

  const onClick = () => {
    handleClick(label);
  };

  if (activeTab === label) {
    className = 'active';
  }

  return (
    <StyledTabs className={className} onClick={onClick}>
      {label}
    </StyledTabs>
  );
};
export default Tab;