react-router-dom v6 NavLink 和 MUI ListItem 不适用于 className

Question

我在使用带有 react-router-dom v6 的 MUI 时遇到问题。

import ListItem from '@mui/material/ListItem';
import { NavLink } from 'react-router-dom';

<List key={index}>
  <ListItem
     component={NavLink}
     sx={{
       color: '#8C8C8C',
     }}
     to={'/home'}
     className={({ isActive }) => (isActive ? classes.activeLink : undefined)
     >
     <ListItemIcon></ListItemIcon>
   <ListItemText primary='Home'/>
 </ListItem>
</List>

className不起作用并显示错误：

No overload matches this call.
  The last overload gave the following error.
    Type '({ isActive }: { isActive: any; }) => boolean' is not assignable to type 'string'
The expected type comes from property 'className' which is declared here on type 'IntrinsicAttributes & { button?: false | undefined; } & ListItemBaseProps & { components?: { Root?: ElementType<any> | undefined; } | undefined; componentsProps?: { ...; } | undefined; } & CommonProps & Omit<...>'

Answer 1

问题

问题是className道具适用于ListItem ，而不是您指定要呈现的组件。 它不是无关的道具，也不会传递给NavLink组件。

解决方案

• https://mui.com/guides/routing/#link
• https://github.com/mui/material-ui/issues/7956

解决方案似乎是创建一个包含动态className道具的自定义导航链接组件。 将您的动态className function 传递到另一个道具上，比如activeClassName ，然后在内部将其传递给NavLink的className道具。

例子：

import { NavLink as NavLinkBase } from 'react-router-dom'; 

const NavLink = React.forwardRef((props, ref) => (
  <NavLinkBase
    ref={ref}
    {...props}
    className={props.activeClassName}
  />
));

...

import ListItem from '@mui/material/ListItem';
import { NavLink } from '../path/to/NavLink';

...

<List key={index}>
  <ListItem
    component={NavLink}
    activeClassName={({ isActive }) =>
      isActive ? classes.activeLink : undefined
    }
    sx={{ color: '#8C8C8C' }}
    to="/home"
  >
    <ListItemIcon></ListItemIcon>
    <ListItemText primary='Home' />
  </ListItem>
</List>

Answer 2

谢谢大家，这是我的解决方案

import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { Theme } from '@mui/material/styles';
import { createStyles, makeStyles } from '@mui/styles';
import React from 'react';
import { NavLink } from 'react-router-dom';

const MyNavLink = React.forwardRef<any, any>((props, ref) => (
  <NavLink
    ref={ref}
    to={props.to}
    className={({ isActive }) => `${props.className} ${isActive ? props.activeClassName : ''}`}
  >
    {props.children}
  </NavLink>
));

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    activeLink: {
      backgroundColor: '#19ABC0',
      color: '#FFFFFF',
      borderRadius: 8,
      '& .MuiSvgIcon-root': {
        color: '#FFFFFF',
        stroke: '#FFFFFF',
        fill: '#19ABC0',
      },
    },
  })
);

function Sidebar() {
  const classes = useStyles();

  return (
    <>
      <List>
        <ListItem
          component={MyNavLink}
          sx={{
            color: '#8C8C8C',
          }}
          to={'/home'}
          activeClassName={classes.activeLink}
        >
          <ListItemIcon sx={{ stroke: '#8C8C8C', fill: '#FFFFFF' }}></ListItemIcon>
          <ListItemText primary={'Home'} />
        </ListItem>
      </List>
      <List>
        <ListItem
          component={MyNavLink}
          sx={{
            color: '#8C8C8C',
          }}
          to={'/dashboard'}
          activeClassName={classes.activeLink}
        >
          <ListItemIcon sx={{ stroke: '#8C8C8C', fill: '#FFFFFF' }}></ListItemIcon>
          <ListItemText primary={'Dashboard'} />
        </ListItem>
      </List>
    </>
  );
}

className={({ isActive }) => `${props.className} ${isActive ? props.activeClassName : ''}`}

使用 MUI 的 className 并添加 NavLink 的活动 class。

Answer 3

ListItem 中的className属性只能接受字符串 但是在 NavLink 上，您可以定义一个 function ，它的 state （活动或非活动）

您可以创建一个 CustomNavLink 组件，该组件从 ListItemButton 获取属性（使用 forwardRef）并且还具有基于其 state 的不同 styles

如果要保留 mui 的 ListItemButton 的样式，请确保将其适当的mui css 类名添加到 NavLink 的className属性。 然后，您可以添加不同的样式类，以确定它是否处于活动状态。

const CustomNavLink = forwardRef((props, ref) => (
  <NavLink
    ref={ref}
    {...props}
    className={({ isActive }) => (isActive ? props.className + ' Mui-selected' : props.className)}
    end
  />
));

---

确保使用 CustomNavLink 作为 ListItemButton 的组件并添加将被转发到 NavLink 的to属性

<List>
  <ListItem>
    <ListItemButton
      component={CustomNavLink}
      to="/"
    >
      <ListItemIcon><ListIcon /></ListItemIcon>
      <ListItemText primary='Home' />
    </ListItemButton>
  </ListItem>
</List>

Answer 4

这几天让我很困扰..我发现最简单的解决方案是添加；重要。 到 .active 的 CSS

 <Button component={NavLink} to="/home"> Home </Button>

 .active { color: #F07DEA;important; }