在gatsby中使用typography.js更改链接字体颜色

Question

我有一些困难，试图改变一个盖茨比网站的颜色为某人。我的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 
}

...per的盖茨比博士。我知道我在这里不懂什么，但我很难搞清楚那是什么。

排版文档很好地解释如何改变大小和间距，但任何帮助如何改变字体颜色，特别是链接，将不胜感激。

Answer 1

我不知道你是否找到了答案，如果是的话，也许这会对其他人有所帮助。在设计Typography.js时重写样式的方法在您的配置文件中，通常在src/util/typography.js中找到(您的位置可能不同)。

要研究这些样式是如何应用的，请查看Github上的主题，在您的例子中是Kirkham主题。

在第32行周围，您将看到链接的定义：

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

因此，将以下内容添加到typography.js文件中：

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

您可以以相同的方式添加任何重写。希望这能有所帮助。

Answer 2

Link是@reach/路由器的Link的包装器，它将大部分道具传递给结果的a标记，包括style，因此这将生成一个具有应用的样式的锚标记：

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

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