我对Navlink按钮的活动类有问题,我的代码如下所示:
<NavLink exact to="/"><Button>Page</Button></NavLink>
NavLink isActive某种程度上无法正常工作。仅当我单击按钮时,它才会将类更改为活动状态,但是在我释放按钮后,它将不再变为活动状态。
按钮样式的组件:
import styled from 'styled-components';
const Button = styled.button`
width: 50%;
height:35px;
background: white;
color: #71C1A1;
padding: 0;
border:none;
&:active {
background: #71C1A1;
color: white;
}
`;
export default Button;
也许有人可以帮忙?
最佳答案
由React Router赋予元素<NavLink />
的标准类是active
(您可以使用activeClassName="customClass"
控制给定的类)。
因此,您将需要为包装在类.active
的链接中的按钮设置样式。像这样:
const Button = styled.button`
/* ... your other styles */
.active & {
background: #71c1a1;
color: white;
}
`;
关于css - NavLink仅在单击时更改按钮颜色,而不进行设置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54480942/