Soy nuevo en NextJs y estoy tratando de crear un sitio web con una barra de navegación receptiva, en esa barra de navegación cuando paso el mouse sobre el enlace resulta ser de color azul, pero no quiero ese color, solo quiero cambiar su color al pasar el mouse, ¿cómo puedo hacer eso? Esto es lo que he hecho hasta ahora:

 import React from 'react'; import Image from 'next/image'; import Link from 'next/link'; import styles from '../../styles/Navbar.module.css'; export default function NavBar() { return ( <> <nav className='navbar navbar-expand-lg navBg'> <div className='container flex-lg-row flex-nowrap align-items-center'> <div className="navbar-brand" id="brand_img"> <a className='logo-dark' href="/"> <Image src="/logo.png" alt="Logo" layout='intrinsic' width={200} height={70} /> </a> </div> <ul className={styles.menuList}> <li className={styles.menuItem}><Link className={styles.menuLink} href='/'>Home</Link></li> <li className={styles.menuItem}><Link className={styles.menuLink} href='/About'>About Us</Link></li> <li className={styles.menuItem}><Link className={styles.menuLink} href='/'>Plans</Link></li> <li className={styles.menuItem}><Link className={styles.menuLink} href='/'>Blog</Link></li> <li className={styles.menuItem}><Link className={styles.menuLink} href='/'>Features</Link></li> </ul> <div> <button className="btn btn-light">Sign In</button> </div> </div> <style jsx> {`.navBg{ background-color: #2b2a28; color: white; } `} </style> </nav> </> ) }

A continuación se muestra mi archivo CSS:

 .menuList { list-style-type: none; display: flex; margin: 0; padding: 0; } .menuItem { margin-right: 2rem; font-weight: 700; } .menuItem .menuLink:hover { color: rgba(255, 255, 255, 0.7); border-bottom: 1px solid white; }