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>

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

Answer 2

我不确定您是否找到答案，如果可以，也许这会对其他人有所帮助。在配置文件中使用usign 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更改链接字体颜色时遇到问题

2 个答案: