NextJs 13 Link styling - css

Question

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

Answer 1

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