Блог

Я новичок в статической разработке сайтов для блогов и пытаюсь использовать 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 приводит к той же проблеме. Это может показаться глупым вопросом, но что мне нужно сделать в этом случае, чтобы изменить цвет?

background_color свойство from gatsby-plugin-manifest обозначает функции PWA (P rogressive W eb A pps), а не основное background-color свойство CSS.

Чтобы изменить стиль для любого компонента или элемента, просто добавьте 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> (поскольку он расширяется от @reach/router от React) добавляет дополнительную функцию для пометки текущей страницы (или частичного пути) как активной с помощью activeClassName prop ;

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