在 gatsby 中使用typography.js 更改链接字体颜色时遇到问题

Question

我在尝试为某人更改 gatsby 站点中 a 链接的颜色时遇到了一些麻烦。我的 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

Link是 @reach/router's 的包装器Link，它将大多数道具传递给生成的a标签，包括style，因此这将生成一个应用样式的锚标签：

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

您能否使用您的网络检查器来确认正在应用样式并查看它们是否被覆盖？如果未应用样式，您可能会看到缓存页面或其他一些不相关的问题。