基于NavLink isActive动态设置MUI Button variant报错（TS+React-Router v6）

错误原因 #

MUI Button的variant属性仅接受"text"、"outlined"、"contained"或undefined类型的静态值，不支持传入函数动态计算。你传入的函数类型与属性要求的类型不兼容，因此触发TS2769类型错误。

解决方案 #

方案1：利用NavLink的children函数特性 #

将NavLink作为外层容器，通过它的children函数获取isActive状态，再动态设置Button的variant：

<NavLink to="/" style={{ textDecoration: 'none' }}>
  {({ isActive }) => (
    <Button variant={isActive ? 'contained' : 'outlined'}>
      Home
    </Button>
  )}
</NavLink>

注：添加style={{ textDecoration: 'none' }}是为了移除NavLink默认的下划线样式

方案2：使用react-router-dom的useMatch钩子 #

在组件内部通过useMatch判断当前路径是否匹配，直接给Button传入对应的variant值：

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

// 组件内部逻辑
const isHomeActive = useMatch('/');

return (
  <Button 
    to="/" 
    component={NavLink} 
    variant={isHomeActive ? 'contained' : 'outlined'}
  >
    Home
  </Button>
);

内容的提问来源于stack exchange，提问作者Ákos Dániel Bollók