将ListItemButton用作NavLink：为何选中时无默认激活样式？

问题根源 #

React Router的NavLink会在路由匹配时自动添加.active类，但MUI的ListItemButton组件默认样式里没有对.active类做任何样式定义，所以你移除手动写的sx样式后，自然看不到激活状态的视觉反馈。另外，ListItemButton自身的selected选中状态是独立的，和React Router的路由匹配状态没有自动绑定关系。

解决方法 #

方法1：用NavLink的动态样式函数

直接通过NavLink的style函数，根据isActive状态动态设置背景色：

<ListItem disablePadding key={user.id}>
  <ListItemButton
    component={NavLink}
    to={`/messages/${user.id}`}
    style={({ isActive }) => ({
      backgroundColor: isActive ? 'lightgray' : 'transparent'
    })}
  >
    <ListItemIcon>
      <PersonIcon />
    </ListItemIcon>
    <ListItemText primary={user.name} />
  </ListItemButton>
</ListItem>

方法2：结合useMatch控制selected属性

用React Router的useMatch钩子判断当前路由是否匹配，给ListItemButton设置selected属性，这样就能复用MUI内置的选中样式：

import { useMatch } from 'react-router-dom';

// 循环内部代码
const match = useMatch(`/messages/${user.id}`);
return (
  <ListItem disablePadding key={user.id}>
    <ListItemButton
      component={NavLink}
      to={`/messages/${user.id}`}
      selected={!!match}
    >
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary={user.name} />
    </ListItemButton>
  </ListItem>
);

设置selected后，MUI会自动给按钮应用内置的选中背景色，不需要手动写sx样式。

方法3：全局主题统一配置

如果想让所有作为NavLink的ListItemButton都自动拥有激活样式，可以在MUI主题里全局配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiListItemButton: {
      styleOverrides: {
        root: {
          '&.active': {
            backgroundColor: 'lightgray',
            // 可按需添加字体颜色、边框等其他样式
          }
        }
      }
    }
  }
});

// 用ThemeProvider包裹你的组件树
<ThemeProvider theme={theme}>
  {/* 你的List组件代码 */}
</ThemeProvider>

内容的提问来源于stack exchange，提问作者Signum