根据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

在主页上的文字是白色的，这就是我在其他页面上的after...but，这些页面没有全尺寸的图片。字体是白色的，如何更改css class id ? url不是/ (index.js)

谢谢

Answer 1

我建议使用@reach/router (这是Gatsby的<Link>组件所使用的，以及React如何构建和保持链接和页面之间的逻辑)。一旦安装并导入了包，就可以使用location使用者在其中安全地获取所需的内容，因为它将公开一个包含所需所有信息的location对象。就像这样：

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对象可能会导致站点中断，因为它不是在运行时定义的(在build模式下检查它)，因此，您需要首先检查它是否定义为呈现和执行代码逻辑的其余部分，这会弄脏代码，降低清晰度和可伸缩性。