使用样式的组件ReactJS在NAV栏中的水平滚动

Question

我正在研究初学者。我有带标签的NAV栏。我必须只使用样式的组件。

import styled from "styled-components";
import { Link } from 'react-router-dom';
const Header = (props) => {
  return (
    <>
    {/* this is for nav bar */}
    <Container backgroundColor="#F4F5F7">
    <NavMenu>
      
        <Link to="/">
          <ul>Home</ul>
        </Link>
        <Link to="/Ourteam">
          <ul>Our team</ul>
        </Link>
        <Link to="/Admissions">
          <ul>Admission</ul>
        </Link>
        <Link to="/Fees">
          <ul>Fee</ul>
        </Link>
        <Link to="/Services">
          <ul>Services</ul>
        </Link>
        <Link to="/Announcements">
          <ul>Announcements</ul>
        </Link>
        <Link to="/Gallery">
          <ul>Gallery</ul>
        </Link>
        <Link to="/Vacancy">
          <ul>Vacancy</ul>
        </Link>
        <Link to="/FAQ">
          <ul>FAQ</ul>
        </Link>
        <Link to="/Misc">
          <ul>Misc</ul>
        </Link>
      
        <Link to="/Aboutus">
          <ul>Aboutus</ul>
        </Link>
      </NavMenu>
    </Container>
    {/* this is for front bar */}
    <Container top="10px">
    <Logo>
      <a href="/">
        <img src="/images/Tree1.png" alt="" />
      </a>
    </Logo>
     
    
    <Login>Login</Login>
    <Signup>Create Account</Signup>
  

  </Container>
  </>
  );
};
//Styled-Components

const Container = styled.div`
  position: absolute;
  background-color: ${(props)=>props.backgroundColor};
  top: ${(props)=>props.top};
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
  align-items: center;
  z-index: 1000;
  
`;

const Logo = styled.a`
  /* padding: 0; */
  width: 80px;
  /* font-size: 0; */
  /* display: inline-block; */
  align-items: center;

  a {
    cursor: auto;
    img {
      /* display: flex; */
      width: 550%;
      border-radius: 80px;
      /* align-items: leftr; */
    }
  }
`;

const Wrap = styled.div`
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  position: relative;
  top:500px;
  margin-right: auto;
  margin-left: auto;
  
`;

const NavMenu = styled.div`
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  position: relative;
  margin-right: auto;
  margin-left: 30px;

  a {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0 12px;

    span {
      color: black;
      font-size: 18px;
      letter-spacing: 1px;
      line-height: 1.08;
      padding: 1px 0;
      white-space: nowrap;
      position: relative;

      &:before {
        background-color: rgb(249, 249, 249);
        border-radius: 0 0 4px 4px;
        bottom: -6px;
        content: "";
        height: 2px;
        left: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        transform-origin: left center;
        transform: scaleX(0);
        transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        visibility: hidden;
        width: auto;
      }
    }

    &:hover {
      span:before {
        transform: scaleX(1);
        visibility: visible;
        opacity: 1 !important;
      }
    }
  }

  @media (max-width: 548px) {
    display: none;
  }
`;

const Signup = styled.a`
  color: #ffffff;
  background-color: #515C7D;
  padding: 10px 16px;
  margin-right: 80px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: 1px solid #f9f9f9;
  border-radius: 8px;
  transition: all 0.2s ease 0s;

  &:hover {
    background-color: #f9f9f9;
    color: #000;
    border-color: transparent;
  }
`;
const Login = styled.a`
  color: black;
  background-color: transparent;
  padding: 10px 16px;
  margin-left: 900px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: 1px solid black;
  border-radius: 8px;
  transition: all 0.2s ease 0s;

  &:hover {
    background-color: #f9f9f9;
    color: #000;
    border-color: transparent;
  }
`;

export default Header;

我希望左滚动一个按钮向左滚动，向右滚动一个按钮向右滚动。我该怎么做？我找到了一个可以添加的软件包。这是包装 ** https://www.npmjs.coms.coms.coms.coms.coms.coms.coms.coms.coms.com/package/package/reaect-horizo​​ntal--reacont-horizo​​ntal---滚动menu ** 我也对任何其他选择都开放。 我主要关心的是我如何处理