javascript - TailwindCSS 事件链接文本颜色未更改

Question

我正在使用 NextJS 和 Tailwind CSS 来设计顶部导航栏。我希望更改事件链接的文本颜色。下面是我的代码:

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>
    )

}

我还在 tailwind.config.css 中添加了以下内容:

module.exports = {
  #
  variants: {
    extend: {
      textColor: ['active'],
    },
 
}

尽管事件链接的文本颜色没有改变。

你能指导我做错了什么吗？

Answer 1

您可能会混淆两件事:

1. active只要当前按下一个元素，就会应用 Tailwind CSS 中的前缀。 (例如，当您按下链接或按钮时)( https://tailwindcss.com/docs/hover-focus-and-other-states#active )
2. 当前“事件”页面，因为在当前页面路径中匹配 nav元素的 href

你不能用 1 达到 2，它们是不同的东西。

要在 next.js 中实现 2，您需要获取当前路径，将其与 <Link> 进行比较元素的路径，如果它们相等，则添加表明您当前在相应页面上的条件顺风类。

这是一个代码示例，您可以如何实现 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>
  )
}

来源:https://dev.to/yuridevat/how-to-add-styling-to-an-active-link-in-nextjs-593e

在你的情况下，你可以这样做:

<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>