React Router V6 activeStyle 问题

塞尔玛德·纳贾

所以我的问题是我已经阅读了文档,它说我的按钮应该是这样的:

<NavLink
                      style={({ isActive }) =>
                        isActive ? activeStyle : undefined
                      }
                      to="overview"
                      className="group flex items-center px-2 py-2 text-base font-medium rounded-md"
                    >
                      Overview
                    </NavLink>

我应该补充:

  let activeStyle = {
    textDecoration: "underline", 
  };

  let activeClassName = "underline";

但问题是我正在使用 Tailwind,我不知道如何更改“let activeStyle”。我无法添加

  let activeStyle = {
    textDecoration: "bg-gray-900 text-white", 
  };

  let activeClassName = "underline";

这是什么意思..有人可以帮忙吗?

德鲁里斯

如果我没记错的话,我相信 Tailwind 可以使用 CSS 类。逻辑应该应用于className道具。

例子:

<NavLink
  to="overview"
  className={({ isActive }) => 
    [
      "group flex items-center px-2 py-2 text-base font-medium rounded-md",
      isActive ? "bg-gray-900 text-white" : null,
    ]
      .filter(Boolean)
      .join(" ");
  }
>
  Overview
</NavLink>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章