NextJs 13 Link styling-CodePudding

I'm new in nextJs and for a projet, I try to create a menu with a hover effect with this code:


import Link from 'next/link';


const MenuItem = ({ href, label }) => (
  //This Link has a className that doesn't get styled.
  <Link href={href} className="menu-item">
    {label}
  </Link>
);

function MainNavigation() {

  return (
    <>
      <style jsx>{`
      .header {      
        height: 5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ffffff;
        padding: 0 10%;
        font-family: system-ui, sans;
        font-size: 2.5rem;
        font-weight: 800;
      }

      .logo {
        font-size: 2rem;
        color: white;
        font-weight: bold;
      }

      .header ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: baseline;
      }

      .header li {
        margin-left: 3rem;
      }
      
      .menu-item {
        color: #000;
        position: relative;
        text-decoration: none;
      }

      .menu-item::before {
        background: hsl(45 100% 70%);
        content: "";
        inset: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s ease-in-out;
        z-index: -1;
      }
  
      .menu-item:hover::before {
        transform: scaleX(1);
        transform-origin: left;
      }
    `}</style>

      <header className='header'>
        <div className='logo'>React Meetups</div>
        <nav>
          <ul>
            <li>
              <MenuItem href='/' label='menu item 1' />            
            </li>
            <li>
              <MenuItem href='/' label='menu item 2' />
            </li>
          </ul>
        </nav>
      </header>
    </>
  );
}

export default MainNavigation;

According nextJs 13 documentation, we don't need anymore to put in the Link the tag but I wonder how I can do the hover effect on the menu item? Currently the style is not apply on my menu-item.

Someone could explain what's wrong in this piece of code?

Thanks

CodePudding user response：

try this in your style

.header > nav > ul > li > a:hover{
/*put your CSS here*/
}