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

user_6845618 0
Viewed 1692

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: 

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>
    );

As you can see, I just tried changing it by doing:

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

I have also tried: 

<ul style={{ color: `#733380`, listStyle: `none`, float: `right` }}>

And I've tried putting it like this: 

<ListLink style={{ color: `#733380` }} to="/about/">

I also tried creating a separate layout.module.css and linking it to my layout.js where I have 

.layout {
  color: #733380 
}

...per the Gatsby docs. I know I'm not understanding something here, but I'm having a rough go figuring out what that is.

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.

gatsby reactjs css
2 Answers

Link is a wrapper around @reach/router's Link, which passes most props on to the resulting a tag, including style, so this will generate an anchor tag with the styles applied: 

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

Can you use your web inspector to confirm that the styles are being applied and see if perhaps they're being overridden? If the styles aren't applied you may be seeing a cached page or some other unrelated issue.

user_2031300

I am not sure if you found an answer, if so, maybe this will help others. The way to override the style while usign Typography.js is within your configuration file, normally found at src/util/typography.js(your location maybe different).

To investigate how the styles are applied, look into the theme on Github, in your case the Kirkham theme.

Around line 32 you will see the definition of the links:

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

So add the following to your typography.js file:

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

You can add any overrides in the same way. hope this helps.

user_98780710
Related