0
116
VistasTailwindCSS El color del texto del enlace activo no cambia
Estoy usando NextJS y Tailwind css para diseñar una barra de navegación superior. Quiero que cambie el color del texto para el enlace activo. A continuación se muestra mi código:
const Header = () => { return( <header> <nav className="sd:max-w-6xl mx-auto"> <ul className="flex py-2"> <li className="mr-auto ml-4"> <Link href="/"><a><Image width={80} height={80} src="/images/brand-logo.png" alt="ECT Logo"/></a></Link> </li> <li className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600"> <Link href="/"><a>Home</a></Link> </li> <li className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600"> <Link href="/user/signup"><a>Join</a></Link> </li> <li className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600"> <Link href="/user/login"><a>Login</a></Link> </li> </ul> </nav> </header> ) }También he agregado lo siguiente en mi tailwind.config.css:
module.exports = { # variants: { extend: { textColor: ['active'], }, }A pesar de eso, el color del texto no cambia para el enlace activo.
¿Puede por favor guiar lo que estoy haciendo mal?
3 Respuestas
Responde la pregunta0
Puede que estés confundiendo dos cosas:
- El prefijo
activeen Tailwind CSS se aplica cada vez que se presiona un elemento. (por ejemplo, mientras presiona un enlace o botón) ( https://tailwindcss.com/docs/hover-focus-and-other-states#active ) - La página actualmente "activa", como en la ruta de la página actual, coincide con el href del elemento de
nav
No se puede lograr 2 con 1, son cosas diferentes.
Para lograr 2 en next.js, necesitaría obtener la ruta actual, compararla con la ruta del elemento <Link> y, si son iguales, agregar clases de viento de cola condicionales que muestren que se encuentra actualmente en la página respectiva.
Aquí hay un ejemplo de código de cómo puede lograr 2:
import Link from 'next/link'; import { useRouter } from 'next/router'; export const Header = () => { const router = useRouter(); return ( <header> <Link href="/"> <a className={router.pathname == "/" ? "active" : ""}> Home </a> </Link> </header> ) }Fuente: https://dev.to/yuridevat/how-to-add-styling-to-an-active-link-in-nextjs-593e
En tu caso, podrías hacer algo como esto:
<Link href="/user/signup"> <a className={`mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-xl ${router.pathname == "/user/signup" ? "text-indigo-600" : "text-brand-darkblue"}`}> Home </a> </Link>0
Debe usar NavLink en lugar de Link, coincidirá con la URL actual. Este es un ejemplo que he usado:
<NavLink to={`/${link.name}`} className={ ({isActive})=> (" capitalize my-2 flex flex-col ") + (isActive?ActiveLink:NormalLink) }> {link.name} </NavLink>0
Usando NextJs y Tailwind usando alternar el modo oscuro/claro, así es como lo resolví
//ActiveLink.js import { useRouter } from 'next/router'; import Link from 'next/link'; import PropTypes from 'prop-types'; import { useTheme } from 'next-themes'; const ActiveLink = ({ href, children, ...rest }) => { const router = useRouter(); const { theme, systemTheme } = useTheme(); const useLoaded = () => { const [loaded, setLoaded] = useState(false); useEffect(() => setLoaded(true), []); return loaded; }; const mounted = useLoaded(); const isActive = router.asPath === href; const currentTheme = mounted && theme !== undefined && theme === 'system' ? systemTheme : theme; const activeLinkBgColor = currentTheme === 'dark' ? 'bg-gray-700 text-white' : 'bg-blue-600 text-white'; const themeBgHover = currentTheme === 'dark' ? 'hover:bg-gray-700 hover:text-white' : 'hover:bg-blue-600 hover:text-white '; const activeLinkAndNotActiveColor = isActive ? activeLinkBgColor : `text-gray-300 ${themeBgHover}`; const className = `${activeLinkAndNotActiveColor} px-3 py-2 rounded-md text-sm font-medium`; return ( <Link href={href} passHref {...rest}> <a className={className} aria-current={isActive ? 'page' : undefined}> {children} </a> </Link> ); }; ActiveLink.propTypes = { href: PropTypes.string.isRequired, }; export default ActiveLink; // How to use it <ActiveLink href='/about'> About </ActiveLink> Resultado: 
Buena suerte.