我正在使用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 CSS中的活動前綴。(例如，當您按下鏈接或按鈕時)(https://tailwindcss . com/docs/hover-focus-and-other-States # active) 當前& quot活動& quot頁面，因為當前頁面路徑與導航項目的href匹配 你不能用1實現2，它們是不同的東西。

為了在next.js中實現2，您需要獲取當前路徑，將其與& ltLink & gt元素的路徑，如果它們相等，則添加條件tailwind類，以顯示您當前位于相應的頁面上。

下面是一個代碼示例，說明如何實現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/yuride vat/how-to-add-styling-to-a-active-link-in-nextjs-593 e

對于您的情況，您可以這樣做:

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

當使用NavLink時，在tailwindcss中將類活動添加到鏈接中，但不是活動狀態

最簡單的方法是像這樣使用自定義變量

<NavLink to={``}  className={'[&.active]:text-indigo-500}>
</NavLink>

這種方式既是純粹的css，又利用了tailwindcss的力量。此外，當沒有必要避免呈現問題時，避免使用狀態

你需要使用NavLink而不是Link，它將匹配當前的URL，下面是我用過的一個例子:

<NavLink to={`/${link.name}`}  className={ ({isActive})=>  (" capitalize my-2 flex flex-col ") + (isActive?ActiveLink:NormalLink) }>
              {link.name}
  </NavLink>

使用NextJs和順風使用切換暗/亮模式，這是我如何解決它

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

結果:

祝你好運。

你需要擴展順風修改器來徹底忘記這個問題。

導入tailwindcss/plugin。 通過插件擴展標準修改器。 使用活動:文本-紫色-500。

// tailwind.config.js
const plugin = require('tailwindcss/plugin');


module.exports = {
  // ...
  plugins: [
      // ... some plugins,
      plugin(function({ addVariant }) {
        addVariant('active', ['&:active', '&.router-link-active'])
      })
  ],
}

<template>
  <NuxtLink
    class="active:text-purple-500"
  >
    <slot></slot>
  </NuxtLink>
</template>

這種方法將有助于:

避免擴展代碼庫時出現錯誤，因為您不必記住活動狀態的定制。 將組件從一個項目遷移到另一個項目。