我的导航栏上有 3 个按钮,如果它是活动页面,我想将文本的颜色更改为不同的颜色。
我还想有一个默认的,第一个。
StyledLink 来自另一个答案,但它不起作用。我正在使用脉轮用户界面。
这是我的 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的新手,做出反应,我似乎找不到正确的答案