基于NavLink isActive state TypeScript MUI React Router v6的Rend

Question

我试图根据Navlink的isActive状态有条件地更改mui Button的变体，但收到错误

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

错误：编译有问题：X

src/features/nawbar/navbar.tsx:17:50 中的错误

TS2769:没有与此调用匹配的重载。过载1/3，'(props:{href:string；}&{children？：ReactNode；classes？：Partial | undefined；color？："inherit"|"primary"|"secondary"|"success"|省略<…>(：元素"给出了以下错误。类型'(｛isActive｝：｛isActive:any；｝(=>quot；概述"|"包含"不可分配给类型"；text"|"概述"|"包含"|未定义"。第2个重载(共3个("(props:{component:ForwardRefExoticComponent<NavLinkProps&RefAttributes>；；}&{…；}&aamp；Omit<…>&CommonProps&Omit<…>(:Element"给出了以下错误。类型'(｛isActive｝：｛isActive:any；｝(=>quot；概述"|"包含"不可分配给类型"；text"|"概述"|"包含"|未定义"。重载第3个(共3个(，"(props:DefaultComponentProps<ExtendeButtonBaseTypeMap<ButtonTypeMap<｛｝，"button">：元素"，给出以下错误。类型'(｛isActive｝：｛isActive:any；｝(=>quot；概述"|"包含"不可分配给类型"；text"|"概述"|"包含"|未定义"。15|}｝16|>

17|<按钮＝"/"component＝｛NavLink｝variant＝｛(｛isActive｝：｛isActive:any｝(＝>是否处于活动状态？'contained"："outlined"｝>|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^18|主页19 |20 |

Answer 1

我想我找到了答案。我没有将NavLink作为组件传递给MUI按钮，而是将按钮包装在NavLink中，并在那里有条件地呈现它：<NavLink to='/'end style=｛｛textDecoration:‘none’｝｝>｛(｛isActive｝(=>(<按钮sx=｛｛textDecoration:none｝｝变体=｛isActive？'contained'：'outlined'｝>家)}

ps.：text装饰：从NavLink 中删除下划线需要"none">