根据 Gatsby 中的 url 更改字体颜色

Question

我有一个使用 tailwindcss 的简单页脚组件

import React from "react"
import { FaMixcloud, FaFacebookSquare, FaTwitter } from "react-icons/fa"

const Footer = () => {
  return (
    <footer className="w-full fixed bottom-0 px-4 sm:px-10 py-6 flex justify-between items-center">
      <div className="text-white text-xs font-mono uppercase">
        &copy; {new Date().getFullYear()} adam lawther
      </div>
      <nav className="flex items-center">
        <FaMixcloud className="h-6 w-6 mr-4 text-white" />
        <FaFacebookSquare className="h-4 w-4 mr-4 text-white" />
        <FaTwitter className="h-4 w-4 text-white" />
      </nav>
    </footer>
  )
}

export default Footer

在主页上，文本是白色的，这就是我所追求的……但在其他页面上，没有完整尺寸的图像。 字体是白色的，我该如何更改 css class id url 不是 / (index.js)

谢谢

Answer 1

我建议使用@reach/router （这是 Gatsby 的<Link>组件使用的，以及 React 如何构建和保持链接和页面之间的逻辑）。 安装并导入 package 后，您可以使用location使用者在其中安全地获取您需要的内容，因为它会公开location object 以及您需要的所有信息。 就像：

return <Location>
  {({ location })=> {
     let textColor=location.pathname === '/' ? 'text-white' : 'text-gray-500'

        <footer className="w-full fixed bottom-0 px-4 sm:px-10 py-6 flex justify-between items-center">
      <div className=`${textColor} text-xs font-mono uppercase`>
        &copy; {new Date().getFullYear()} adam lawther
      </div>
      <nav className="flex items-center">
        <FaMixcloud className=`h-6 w-6 mr-4 ${textColor}` />
        <FaFacebookSquare className=`h-6 w-6 mr-4 ${textColor}` />
        <FaTwitter className=`h-6 w-6 mr-4 ${textColor}` />
      </nav>
    </footer>
  }}
</Location>

您可以在https://css-tricks.com/how-to-the-get-current-page-url-in-gatsby/中查看其他选项

请记住，直接访问window object 可能会导致您的站点中断，因为它没有在运行时定义（在build模式中检查它）因此，您需要首先检查它是否定义为呈现和执行 Z65E8800B5C68A28AAD89 的 Z65E8800B5C68A26AAD89你的代码逻辑，弄脏了代码，变得不那么清晰和可扩展。