title: Trouble changing the link font color using typography.js in gatsby
body: <p>I'm having some trouble trying to change the color of the a links in a gatsby site for someone. My layout.js looks like this: </p>
  
  <pre><code>import React from "react";
  import { Link } from "gatsby";
  import Background from "../images/glitter.png";
  
  const ListLink = props =&gt; (
    &lt;li style={{ display: `inline-block`, marginRight: `1rem` }}&gt;
      &lt;Link to={props.to}&gt;{props.children}&lt;/Link&gt;
    &lt;/li&gt;
  );
  
  export default ({ children }) =&gt; (
    &lt;div style={{ margin: `0 auto`, padding: `1rem 1rem` }}&gt;
      &lt;header
        style={{
          marginBottom: `1rem`,
          padding: `1rem`,
          backgroundImage: `url(${Background})`
        }}
      &gt;
        &lt;Link to="/" style={{ color: `#733380`, textShadow: `none`, backgroundImage: `none` }}&gt;
          &lt;h3 style={{ display: `inline` }}&gt;Savannah Schmidt&lt;/h3&gt;
        &lt;/Link&gt;
        &lt;ul style={{ listStyle: `none`, float: `right` }}&gt;
          &lt;ListLink to="/about/"&gt;
            About
          &lt;/ListLink&gt;
          &lt;ListLink to="/portfolio/"&gt;
            Portfolio
          &lt;/ListLink&gt;
          &lt;ListLink to="/contact/"&gt;
            Contact
          &lt;/ListLink&gt;
        &lt;/ul&gt;
      &lt;/header&gt;
      {children}
     &lt;/div&gt;
      );
  </code></pre>
  
  <p>As you can see, I just tried changing it by doing:</p>
  
  <pre><code>&lt;Link to="/" style={{ color: `#733380`, textShadow: `none`, backgroundImage: `none` }}&gt;
  </code></pre>
  
  <p>I have also tried: </p>
  
  <pre><code>&lt;ul style={{ color: `#733380`, listStyle: `none`, float: `right` }}&gt;
  </code></pre>
  
  <p>And I've tried putting it like this: </p>
  
  <pre><code>&lt;ListLink style={{ color: `#733380` }} to="/about/"&gt;
  </code></pre>
  
  <p>I also tried creating a separate layout.module.css and linking it to my layout.js where I have </p>
  
  <pre><code>.layout {
    color: #733380 
  }
  </code></pre>
  
  <p>...per the Gatsby docs. I know I'm not understanding something here, but I'm having a rough go figuring out what that is. </p>
  
  <p>The typography docs explain well how to change sizes and spacing, but any help with how to change the font colors, particularly links, would be appreciated. </p>