[Button] No way to style a button based on the active NavLink from react-router in v5 whereas in v4 it was possible

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

In MUI4 we can do like this,

const useStyles = makeStyles({
  button: {
    "&.active": {
      background:'black',
    },
  },
});
<Button
  className={classes.button}
  component={NavLink}
  to="/page-link"
>

But in MUI5 makeStyles is deprecated and also passing as component to Button is not setting the active class to the button when the link is active.

Expected behavior 🤔

MUI5 button should set the classes set by the component passed to it.

<Button
  className={classes.button}
  component={NavLink}
  to="/page-link"
>

The above should add the active class when the link is active.

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.0.1
  Binaries:
    Node: 16.14.2 - ~/.nvs/default/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 8.5.0 - ~/.nvs/default/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Not Found
    Firefox: 96.0.2
    Safari: 15.1
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.75 
    @mui/icons-material: ^5.6.2 => 5.6.2 
    @mui/material: ^5.6.0 => 5.6.0 
    @mui/private-theming:  5.6.0 
    @mui/styled-engine:  5.6.0 
    @mui/system:  5.6.0 
    @mui/types:  7.1.3 
    @mui/utils:  5.6.0 
    @types/react:  17.0.43 
    react: ^18.0.0 => 18.0.0 
    react-dom: ^18.0.0 => 18.0.0 
    styled-components: ^5.3.5 => 5.3.5 
    typescript:  4.6.3 

[siriwatknp]

Thanks. But this does not seem to resolve the issue:

My bad, from your snippet it should be &.active not &:active.

Can you try this?

import { NavLink as ReactNav } from 'react-router-dom'

<ListItemButton 
      to="/dashboard" 
      component={ReactNav}
      sx={{
        '&.active': {
          color: 'blue',
          fontWeight: 600
        }
      }}
    >
      <ListItemIcon>
        <DashboardIcon />
      </ListItemIcon>
      <ListItemText primary="Dashboard" />
</ListItemButton>

[dizzyjaguar]

Thanks. But this does not seem to resolve the issue:

My bad, from your snippet it should be &.active not &:active.

Can you try this?

import { NavLink as ReactNav } from 'react-router-dom'

<ListItemButton 
      to="/dashboard" 
      component={ReactNav}
      sx={{
        '&.active': {
          color: 'blue',
          fontWeight: 600
        }
      }}
    >
      <ListItemIcon>
        <DashboardIcon />
      </ListItemIcon>
      <ListItemText primary="Dashboard" />
</ListItemButton>

This is the best solution! Just ran into the same problem.