How to apply a style to the active link of a NavLink element using mui styled()?

Question

I have a NavLink wrapper component. I want to add an .active style to this component when it becomes active, but I don't know how it can be done with styled(). How can this be achieved?

Here is my code:

import { forwardRef } from "react";
import { NavLink as NavLinkBase } from "react-router-dom";
import { styled } from "@mui/system";


const NavLink = forwardRef((props, ref) => {
  return (
    <NavLinkBase   
      ref={ref}
      {...props}
      className={({ isActive }) => [
        props.className,
        isActive ? 'active' : null,
      ]
        .filter(Boolean)
        .join(" ")
      }
      end={props.to === '/' ? true : false}
    />  
  )
});

export default NavLink

Answer 1

You can also use AppBar and Toolbar to achieve that.

This is how I did that:

 import { NavLink } from 'react-router-dom';
 import styled from '@emotion/styled';

  const ActiveLink = styled(NavLink)({
    '&.active': {
      color: '#edff00'
    }
  });


   <AppBar position="static">
      <Toolbar>
        <Button
          component={ActiveLink}
          to="/"
          color="inherit"
          startIcon={<LoginIcon />}
          sx={{ display: { xs: 'none', sm: 'flex' } }}
        >
          Login
        </Button>
        <Button
          component={ActiveLink}
          to="/register"
          color="inherit"
          startIcon={<AppRegistrationIcon />}
          sx={{ display: { xs: 'none', sm: 'flex' } }}
        >
          Register
        </Button>
      </Toolbar>
    </AppBar>

So, I'm using styled from MUI to style NavLink, which I then use as a component for Button, thus enabling me to directly define the route (to="") I'll navigate to when clicking on the button.

Answer 2

The NavLink component has an "active" classname by default when it is active. In the simplest terms you could do the following to define the CSS/styling.

const NavLink = styled(NavLinkBase)(({ theme }) => ({
  ... default styling ...

  "&.active": {
    ... active styling ...
  }
}));

If you are also wanting to define some default props, like the end prop logic, then create an anonymous function component.

const NavLink = styled(props => (
  <NavLinkBase {...props} /* set default props here */ />
))(({ theme }) => ({
  ... default styling ...

  "&.active": {
    ... active styling ...
  }
}));

Example:

const NavLink = styled((props) => (
  <NavLinkBase {...props} end={props.to === "/"} />
))(({ theme }) => ({
  textDecoration: "none",

  "&.active": {
    color: "green",
    fontSize: theme.spacing(3)
  }
}));

...

<ul>
  <li>
    <NavLink to="/">Home</NavLink>
  </li>
  <li>
    <NavLink to="/foo">Foo</NavLink>
  </li>
  <li>
    <NavLink to="/bar">Bar</NavLink>
  </li>
</ul>