如何解决如何更改活动导航栏项目的颜色?
我的导航栏上有 3 个按钮,如果它是活动页面,我想将文本的颜色更改为不同的颜色。
StyledLink 来自另一个答案,但它不起作用。我正在使用 chakra ui。
这是我的 layout.js 的代码:
const StyledLink = styled(Nav.Link)`
font-size: 12px;
text-transform: uppercase;
color: ${(props) => (props.active ? "red" : "inherit")};
`;
export default function Layout({
children,title = "This is the default title",props
}) {
return (
<Flex border="1px solid #EDF2F7" padding="2.5px 24px">
<Text fontWeight="bold" color="orangered" fontSize="35px" mt="-5px">
Index
</Text>
<Nav>
<StyledLink href="/" style={{ textdecoration: "none" }}>
<Text ml="70px" mt="1px" fontSize="20px" isTruncated > //color="orangered"
LIVE Map
</Text>
</StyledLink>
</Nav>
<Link href="/requests" style={{ textdecoration: "none" }}>
<Text ml="70px" mt="1px" fontSize="20px" isTruncated>
Request List
</Text>
</Link>
<Link style={{ textdecoration: "none" }}>
<Text ml="50px" mt="1px" fontSize="20px">
Analytics
</Text>
</Link>
</Flex>
);
}
我是 nextjs 的新手,做出反应,我似乎找不到正确的答案
解决方法
您需要使用 useRouter
。在此处阅读更多信息:https://nextjs.org/docs/api-reference/next/router
您可以使用它来确定您当前所在的路径名并动态更改样式。下面的代码取自我的网站:https://github.com/bjcarlson42/benjamincarlson.io/blob/master/components/Navigation.js
import { useRouter } from 'next/router'
// your code here
const { colorMode } = useColorMode()
const router = useRouter()
const bgColor = {
light: '#fff',dark: '#171717' // #1A202C
}
<NextLink href="/statistics" passHref>
<Button
as="a"
variant="ghost"
p={[1,2,4]}
_hover={{ backgroundColor: navHoverBg[colorMode] }}
backgroundColor={router.pathname === '/statistics' ? navHoverBg[colorMode] : null}
aria-label="Statistics"
>
Statistics
</Button>
</NextLink>
<NextLink href="/blog" passHref>
<Button
as="a"
variant="ghost"
p={[1,4]}
_hover={{ backgroundColor: navHoverBg[colorMode] }} backgroundColor={router.pathname.includes('/blog') ? navHoverBg[colorMode] : null}
aria-label="Blog"
>
Blog
</Button>
</NextLink>
<NextLink href="/projects" passHref>
<Button
as="a"
variant="ghost"
p={[1,4]}
_hover={{ backgroundColor: navHoverBg[colorMode] }} backgroundColor={router.pathname === '/projects' ? navHoverBg[colorMode] : null}
aria-label="Projects"
>
Projects
</Button>
</NextLink>
// more code here
现在,对于问题的第二部分:如何将第一个设为默认?
您可以通过添加更多逻辑来做到这一点。回到上面的例子,我将统计设为默认值。
<NextLink href="/statistics" passHref>
<Button
as="a"
variant="ghost"
p={[1,4]}
_hover={{ backgroundColor: navHoverBg[colorMode] }}
backgroundColor={router.pathname === '/statistics' || (router.pathname != '/statistics' && router.pathname != '/blog' && router.pathname != '/projects') ? navHoverBg[colorMode] : null}
aria-label="Statistics"
>
Statistics
</Button>
</NextLink>
如您所见,我正在检查我们是否在统计信息页面上,或者我们是否不在 3 个页面中的任何一个页面上 - 统计信息仍将处于“活动状态”,因为这是默认设置。
,你的问题没有足够的信息,但我已经完成了。
你可以这样做
const history = useHistory()
<StyledComponent isActive={history.location.pathname === '/'} href='/'>
</StyledComponent>
,
您的 StyledLink
期待 active
道具改变其颜色。您可以使用 useRouter
检查当前路径,然后基于此将 active
传递给 StyledLink
。
import { useRouter } from "next/router";
import Link from "next/link";
// ...
export default function Layout({ children,title = "This is the default title",props }) {
const { asPath } = useRouter();
return (
// ...
<Link href="/" passHref>
<StyledLink style={{ textDecoration: "none" }} active={asPath === "/"}>
<Text ml="70px" mt="1px" fontSize="20px" isTruncated > //color="orangered"
LIVE Map
</Text>
</StyledLink>
</Link>
// ...
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。