Why isn't 'isActive' working in NavLink?

[SusiKette]

The documentation uses a property 'isActive', in NavLink, but it isn't working. I'm always getting the active state for all links that use this. I'm using version 6.2.2

import {NavLink} from "react-router-dom";
import {Box} from "@mui/material";

interface ButtonBaseProps {
    text: string;
    path: string;
}

export function ButtonBase({text, path}: ButtonBaseProps): JSX.Element {
    return <Box style={{ margin: 0 }}>
        <NavLink to={path}
                 style={(isActive) => ({
                     fontFamily: "Roboto",
                     color: "#ffffff",
                     backgroundColor: "#0f172b",
                     borderRadius: 0,
                     marginTop: 0,
                     marginLeft: 10,
                     marginRight: 10,
                     marginBottom: 0,
                     paddingTop: 18,
                     paddingLeft: 0,
                     paddingRight: 0,
                     paddingBottom: 18,
                     minWidth: 0,
                     fontSize: 16,
                     fontWeight: isActive ? "500" : "400",
                     textTransform: "none",
                     textDecoration: isActive ? "underline" : "none",
                     textUnderlineOffset: 18,
                     textDecorationColor: "#ff7321",
                     textDecorationThickness: 5,
                 })}>
            {text}
        </NavLink>
    </Box>
}

[BenJenkinson]

You're almost there. The argument to the function is an object with a property named isActive, not a boolean on its own.

❌ You have this

style={(isActive) => ({

✅ You want this

style={({ isActive }) =>

📚 <NavLink> API docs

interface NavLinkProps {
  // ... other props
  style?:
    | React.CSSProperties
    | ((props: {
        isActive: boolean;
      }) => React.CSSProperties);
}