active当您在链接到的页面上时,React Router会为NavLinks 添加一个类.如何使用Styled Components访问此属性.当你在他们的页面上时,我需要以不同的方式设置菜单项的样式.
const LinkElem = styled(NavLink)`
font-size: 16px;
font-weight: 400;
${props => console.log(props)};
&:hover {
color: ${props => props.theme.colorOrange};
}
`;
const Menu = props => {
const { me } = props;
return (
<MenuElem>
<li>
{me ? (
<LinkElem to="/account">Account</LinkElem>
) : (
<LinkElem to="/login">Log in / sign up</LinkElem>
)}
</li>
</MenuElem>
);
};
Run Code Online (Sandbox Code Playgroud)