[英]How to style Next.js active link with Styled Components
[英]How to style Link component when on active page on Next.js
我有一个关于在活动页面上设置锚组件样式的问题。
这是我的代码:
import Link from 'next/link';
import styled from 'styled-components';
const NavStyle = styled.nav`
display: flex;
justify-content: space-between;
.nav-link a {
text-decoration: none;
color: white;
padding: 10px;
background-color: #FFCF00;
}
`;
export default function Nav() {
return (
<NavStyle>
<div className="nav-link">
<Link href="/" passHref>
<a>HOME</a>
</Link>
<Link href="/pricing">
<a>PRICING</a>
</Link>
<Link href="/terms">
<a>TERMS</a>
</Link>
<Link href="/login">
<a>LOGIN</a>
</Link>
</div>
<Link href="/">
<a>LOGO</a>
</Link>
</NavStyle>
)
}
我想要的是,当我单击链接并移动到另一个页面时,活动链接(与 URL 匹配)将具有绿色背景。 我试过这个,但没有任何改变:
const NavStyle = styled.nav`
display: flex;
justify-content: space-between;
.nav-link a {
text-decoration: none;
color: white;
padding: 10px;
background-color: #FFCF00;
&[aria-current] {
background-color: green;
}
}
`;
Next.js 不会将aria-current
添加到您的活动链接; 但是,您可以创建一个自定义Link
组件来检查当前pathname
是否与href
属性相同。
import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
const NavLink = ({ children, href }) => {
const child = React.Children.only(children);
const router = useRouter();
return (
<Link href={href}>
{React.cloneElement(child, {
"aria-current": router.pathname === href ? "page" : null
})}
</Link>
);
};
export default NavLink;
然后,只要您想将aria-current
添加到活动链接,就可以使用此组件而不是默认Link
:
const NavStyle = styled.nav`
display: flex;
justify-content: space-between;
a {
background-color: #353637;
color: #fff;
padding: 1rem;
text-decoration: none;
&[aria-current] {
background-color: #faf9f4;
color: #353637;
}
}
`;
export default function Nav() {
return (
<NavStyle>
<div className="nav-link">
<NavLink href="/">
<a>HOME</a>
</NavLink>
<NavLink href="/pricing">
<a>PRICING</a>
</NavLink>
<NavLink href="/terms">
<a>TERMS</a>
</NavLink>
<NavLink href="/login">
<a>LOGIN</a>
</NavLink>
</div>
<Link href="/">
<a>LOGO</a>
</Link>
</NavStyle>
);
}
改用标签:
<a href="/auth/forget_pass" style={{color:"red"}}>
forgot your password?
</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.