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

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 
}

...根据 Gatsby 文档。我知道我在这里不理解某些东西，但我正在粗略地弄清楚那是什么。

排版文档很好地解释了如何更改大小和间距，但是对于如何更改字体颜色(尤其是链接)的任何帮助，我们将不胜感激。

Answer 1

Link 是@reach/router 的 Link 的包装器，它将大多数属性传递给生成的 a 标签，包括 style，因此这将生成一个应用样式的 anchor 标记:

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

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