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

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，所以这将生成一个应用样式的锚标记：

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

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

Answer 2

我不确定您是否找到了答案，如果是的话，也许这会对其他人有所帮助。使用 Typography.js 时覆盖样式的方法在您的配置文件中，通常位于 src/util/typography.js（您的位置可能不同）。

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

在第 32 行附近，您将看到链接的定义：

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

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

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

您可以用相同的方式添加任何覆盖。希望这可以帮助。

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

Trouble changing the link font color using typography.js in gatsby

css

reactjs

gatsby