reactjs 如何使用tailwind-css来设置Navlink的活动状态(react-router-dom)？

dced5bon 于 2023-01-25 发布在 React

关注(0)|答案(2)|浏览(129)

我尝试为Navlink的className使用模板文字，但它不起作用。
这是当前代码：

className={`px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${({ isActive }) => isActive ? "bg-red-500" : "bg-black-500"}`}

我试着只使用活动部分来检查是否有其他东西在干扰它，但它仍然不起作用。

className={`${({ isActive }) => isActive ? "bg-red-500" : "bg-blue-500"}`}

我使用模板文字的方式有什么问题吗？
当我使用这个时它工作：

className={({ isActive }) => isActive ? "bg-red-500" : "bg-blue-500"}

reactjs

来源：https://stackoverflow.com/questions/75229681/how-can-i-use-tailwind-css-to-style-the-active-state-of-the-navlinkreact-router

2条答案

按热度按时间

kadbb4591#

className prop接受字符串***或***传递isActive prop并返回字符串或undefined的函数回调。
参见NavLink

declare function NavLink(
  props: NavLinkProps
): React.ReactElement;

interface NavLinkProps
  extends Omit<
    LinkProps,
    "className" | "style" | "children"
  > {
  caseSensitive?: boolean;
  children?:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);
  className?:
    | string
    | ((props: { isActive: boolean; }) => string | undefined); // <--
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: { isActive: boolean; }) => React.CSSProperties);
}

使用回调函数接受isActive prop并返回一个包含要应用的CSS类的字符串。

className={({ isActive }) => [
    "px-2 py-2.5",
    "hover:bg-cprimary-300 hover:text-csecond-100",
    "rounded-md transition",
    isActive ? "bg-red-500" : "bg-black-500"
  ].join(" ")
}

赞(0）回复(0）举报 2023-01-25

doinxwow2#

请尝试以下方法。类名={px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${isActive ? "bg-red-500": "bg-black-500"}}

赞(0）回复(0）举报 2023-01-25