isActive NavLink React JavaScript 中背景颜色没有改变

Question

所选列表项的背景颜色没有改变，只是文本颜色变为白色。

import { NavLink } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { MyContext } from "./links/MyContext.jsx";
import { useContext } from "react";

export default function HeaderLists() {
  const [t] = useTranslation();
  const { isDarkMode } = useContext(MyContext);

  const activeLink = `bg-gradient-to-r from-cyan-800 to-blue-800 text-white `;
  const normalLink = `hover:text-white hover:border-none ${
    isDarkMode
      ? "text-white from-blue-950 to-cyan-900"
      : "text-stone-600 border-stone-600"
  }`;

  return (
    <ul className="mt-10 text-center">
      <NavLink
        to="/"
        className={({ isActive }) => (isActive ? activeLink : normalLink)}
      >
        <li className="border-b-2 border-b-stone-500 p-5 hover:bg-gradient-to-r from-cyan-500 to-blue-600">
          {t("tasks")}{" "}
        </li>
      </NavLink>

      <NavLink
        to="/Calendar"
        className={({ isActive }) => (isActive ? activeLink : normalLink)}
      >
        <li className="border-b-2 border-b-stone-500 p-5 hover:bg-gradient-to-r from-cyan-500 to-blue-600">
          {t("calendar")}
        </li>
      </NavLink>

      <NavLink
        to="/Settings"
        className={({ isActive }) => (isActive ? activeLink : normalLink)}
      >
        <li className="border-b-2 border-b-stone-500 p-5 hover:bg-gradient-to-r from-cyan-500 to-blue-600">
          {t("settings")}{" "}
        </li>
      </NavLink>
    </ul>
  );
}

当我选择任务或日历等列表项时，所选项目的颜色将更改为白色，但背景颜色保持不变。它不会更改为我在 activeLink const 中指定的渐变。我想知道如何解决它。

Answer 1

无需使用

active

状态，更新您的代码如下：

<ul className="mt-10 text-center">
  <NavLink to="/" className="group">
    <li
      className={`p-5 border-b-2 border-b-stone-500 hover:bg-gradient-to-r 
         hover:from-cyan-500 hover:to-blue-600 group-[.active]:bg-gradient-to-r group-[.active]:from-cyan-800 group-[.active]:to-blue-800 group-[.active]:text-white ${
           isDarkMode
             ? "text-white from-blue-950 to-cyan-900"
             : "text-stone-600 border-stone-600"
         }`}
    >
      {t("tasks")}{" "}
    </li>
  </NavLink>
</ul>