Gatsby 配置不改变颜色主题

【问题标题】：Gatsby Config Not Changing Color ThemeGatsby 配置不改变颜色主题
【发布时间】：2020-10-29 15:19:41
【问题描述】：

我是博客静态网站开发的新手，我正在尝试使用 Gatsby。我尝试将启动器的背景和主题颜色从粉红色 (#ed64a6) 更改为紫色 (#702da1)。但是，当我将其放入 gatsby-config.js 并运行 gatsby develop 时，没有任何变化。

这是gatsby-config.js：

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-personal-website-starter`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#702da1`,
        theme_color: `#702da1`,
        display: `minimal-ui`,
        icon: `src/assets/images/gatsby-icon.png`
      }
    }

而且标题的颜色仍然是粉红色。

gatsby build 和 gatsby serve 会导致相同的问题。这似乎是一个愚蠢的问题，但在这种情况下我需要做什么来改变颜色？

【问题讨论】：

标签： javascript reactjs gatsby blogs

【解决方案1】：

background_color 来自gatsby-plugin-manifest 的属性代表 PWA（P渐进式Web Apps）功能，而不是主要的@ 987654326@ CSS 属性。

要更改styling for any component or element,，只需添加 CSS/SCSS、JS、模块等：

import React from "react"
import Layout from "../components/layout"
import "./styles.css"   

export default function Home() {
  return <Layout>Hello world!</Layout>
}

在你的styles.css:

a {
  color: red:
}

a.active{
  color: blue;
}

请记住，Gatsby's <Link> 组件（因为它从 React 的 @reach/router 扩展而来）添加了一个附加功能，以使用 activeClassName prop 将当前页面（或部分路径）标记为活动；

<Link
  to="/"
  {/* This assumes the `active` class is defined in your CSS */}
  activeClassName="active"
>

【讨论】：