NavLink isActive prop triggers error TS7031-CodePudding

I keep getting Binding element 'isActive' implicitly has an 'any' type) error in my reactjs Project with Typescript. The functionality is working in production despite the isActive prop is being underlined, but the following error keeps showing up whenever I tried to build for production and the build failed. This is my first project with Typescript.

How do I tackle this error please?

Here is the code

const Header = () => {
  
  const navLink = ({ isActive }) => {
    return {
      color: isActive ? "#34C200" : "",
      fontSize: isActive ? "16px" : "",
      borderBottom: isActive ? "solid" : "none",
      paddingBottom: isActive ? "3px" : "",
      outline: isActive ? "none" : "none",
    };
  };

  return (
    <header className="shadow-md sticky z-30 top-0 bg-white px-5 sm:px-10">
      <nav className="container flex items-center py-4">
        <div className="flex flex-row sm:flex-col pl-0 sm:w-1/6 sm:mx-auto sm:justify-center">
          <img
            className="w-1/4 sm:w-2/4 sm:block sm:mx-auto"
            src="images/logos/atasp1.png"
            alt="ATASP-1 Logo"
          />
          <div className="flex justify-center items-center">
            <span className="bg-atasp-mid-red rounded-md sm:rounded-lg text-white italic text-center text-xs sm:text-md p-1 sm:px-4">
              KEBBI - SOKOTO ZONE
            </span>
          </div>
        </div>
        <ul
          className={`hidden sm:flex flex-1 justify-end items-center gap-3 lg:gap-6`}
        >
          <li className="cursor-pointer">
            <NavLink to="/" style={navLink}>
              ATASP-1
            </NavLink>
          </li>
          <li className="cursor-pointer">
            <NavLink to="infra" style={navLink}>
              Infrastructure
            </NavLink>
          </li>
          <li className="cursor-pointer">
            <NavLink to="outreach" style={navLink}>
              Outreach
            </NavLink>
          </li>
    </ul>
  </nav>
</header>
  );
};

export default Header;

CodePudding user response：

the only thing you need to do is add the type for isActive on the NavLink component

  const navLink = ({ isActive }: {isActive: boolean}) => {
    return {
      color: isActive ? "#34C200" : "",
      fontSize: isActive ? "16px" : "",
      borderBottom: isActive ? "solid" : "none",
      paddingBottom: isActive ? "3px" : "",
      outline: isActive ? "none" : "none",
    };
  };