Gatsby 配置不改变颜色主题

Question

我是博客静态网站开发的新手，正在尝试使用 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导致同样的问题。这似乎是一个愚蠢的问题，但在这种情况下我需要做什么来改变颜色？

Answer 1

background_color属性gatsby-plugin-manifest代表 PWA ( Progressive Web A pps) 功能，而不是主要的background-colorCSS 属性。

要更改任何组件或元素的样式，只需添加 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 的<Link>组件（因为它从 React 扩展@reach/router）添加了一个附加功能，可以使用 ; 将当前页面（或部分路径）标记为活动页面activeClassName prop。

<Link

  to="/"

  {/* This assumes the `active` class is defined in your CSS */}

  activeClassName="active"

>