如何更改活动导航栏项目的颜色？

Question

我的导航栏上有 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的新手，做出反应，我似乎找不到正确的答案

Answer 1

您需要使用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, 2, 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, 2, 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, 2, 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 个页面中的任何一个上 - 统计信息仍然是“活动的”，因为这是默认设置。

Answer 2

你的问题没有足够的信息，但我已经做到了。

你可以做这样的事情

const history = useHistory()
<StyledComponent isActive={history.location.pathname === '/'} href='/'>
</StyledComponent>

Answer 3

您的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>
        // ...
    );
}