Проблема с изменением цвета шрифта ссылки с помощью typography.js в gatsby

Question

У меня возникли проблемы при попытке изменить цвет ссылок на сайте gatsby для кого-то. Мой layout.js выглядит так:

import React from "react";
import { Link } from "gatsby";
import Background from "../images/glitter.png";

const ListLink = props => (
  <li style={{ display: `inline-block`, marginRight: `1rem` }}>
    <Link to={props.to}>{props.children}</Link>
  </li>
);

export default ({ children }) => (
  <div style={{ margin: `0 auto`, padding: `1rem 1rem` }}>
    <header
      style={{
        marginBottom: `1rem`,
        padding: `1rem`,
        backgroundImage: `url(${Background})`
      }}
    >
      <Link to="/" style={{ color: `#733380`, textShadow: `none`, backgroundImage: `none` }}>
        <h3 style={{ display: `inline` }}>Savannah Schmidt</h3>
      </Link>
      <ul style={{ listStyle: `none`, float: `right` }}>
        <ListLink to="/about/">
          About
        </ListLink>
        <ListLink to="/portfolio/">
          Portfolio
        </ListLink>
        <ListLink to="/contact/">
          Contact
        </ListLink>
      </ul>
    </header>
    {children}
   </div>
    );

Как видите, я просто попытался изменить его, выполнив:

<Link to="/" style={{ color: `#733380`, textShadow: `none`, backgroundImage: `none` }}>

Я также пробовал:

<ul style={{ color: `#733380`, listStyle: `none`, float: `right` }}>

И я попытался выразить это так:

<ListLink style={{ color: `#733380` }} to="/about/">

Я также попытался создать отдельный файл layout.module.css и связать его с моим layout.js, где у меня есть

.layout {
  color: #733380 
}

... согласно документам Гэтсби. Я знаю, что я чего-то здесь не понимаю, но мне нужно разобраться, что это такое.

Документы по типографии хорошо объясняют, как изменять размеры и интервалы, но любая помощь в том, как изменить цвета шрифта, особенно ссылки, будет принята с благодарностью.

Answer 1

Я не уверен, что вы нашли ответ, если так, может быть, это поможет другим. Способ переопределить стиль при использовании usign Typography.js находится в вашем файле конфигурации, обычно находящемся в src/util/typography.js (ваше местоположение может отличаться).

Чтобы узнать, как применяются стили, загляните в тему на Github, в вашем случае Тема Киркхама .

Вокруг строки 32 вы увидите определение ссылок:

overrideStyles: ({ adjustFontSizeTo, scale, rhythm }, options) => ({
    a: {
      color: "#9f392b",
},

Добавьте в файл typography.js следующее:

kirkham.overrideThemeStyles = () => ({
  'a': {
    color: "#HexColor",
    },
})

Вы можете добавить любые переопределения таким же образом. надеюсь это поможет.

Answer 2

Link - это обертка вокруг @ reach / router Link, которая передает большинство реквизитов в результирующий тег a, включая style, поэтому будет сгенерирован тег привязки с примененными стилями:

<Link to="/" style={{ color: `#733380`, textShadow: `none`, backgroundImage: `none` }}>Some Text</Link>

Можете ли вы использовать свой веб-инспектор, чтобы подтвердить, что стили применяются и посмотреть, возможно, они переопределяются? Если стили не применяются, возможно, вы видите кэшированную страницу или какую-то другую не связанную проблему.