我试图根据Navlink的isActive状态有条件地更改mui Button的变体，但出现错误
<Button to="/" component={NavLink} variant={({isActive}:{isActive:any}) => isActive ? 'contained' : 'outlined'}>
Home
</Button>错误：编译时出现问题：X
错误在src/features/navbar/Navbar.tsx：17：50
TS 2769：没有与此调用匹配的重载。重载1/3，'（props：{ href：string;} & {孩子？：ReactNode;类？：部分|未定义;颜色？：“继承”|“初级”|“次级”|“成功”|“错误”|“信息”|“警告”|undefined; ... 9 more ...; variant？：“text”|... 2更多...|undefined; } & Omit <...>& CommonProps & Omit<...>）：Element '，给出了以下错误。类型'（{ isActive }：{ isActive：any; }）=>“outlined”|“contained”“不能分配给类型”“text”|“概述”|“包容”|未定义重载3中的第2个，'（ prop ：{组件：ForwardRefExoticComponent<NavLinkProps & RefAttributes>;} & {...; } & Omit <...>& CommonProps & Omit<...>）：Element '，给出了以下错误。类型'（{ isActive }：{ isActive：any; }）=>“outlined”|“contained”“不能分配给类型”“text”|“概述”|“包容”|未定义重载3/3，'（ prop ：DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}，“button”>>>）：元素'，给出了以下错误。类型'（{ isActive }：{ isActive：any; }）=>“outlined”|“contained”“不能分配给类型”“text”|“概述”|“包容”|未定义15| 16|>>
十七岁|<Button to="/”component={NavLink} variant={（{isActive}：{isActive：any}）=> isActive？'contained'：联系我们|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^|19号房间|二十个|
1条答案
按热度按时间3mpgtkmj1#
我想我找到答案了。我没有将NavLink作为组件传递给MUI Button，而是将Button Package 在Navlink中，并在那里有条件地呈现它：<NavLink to='/' end style={{textDecoration：'none'}}> {（{ isActive }）=>（<Button sx={{textDecoration：'none'}}变量={isActive？'contained'：'outlined'}> Home）}
ps.：text装饰：需要“none”才能从NavLink中删除下划线