styled-components fun-fun-function

Over there ➡️ in the the sidebar (or ⏬ there if you’re on a small screen), there are links to external sites (regular <a> elements) and also links to other pages on this domain. Those links are special <Link> elements from the Gatsby.js code. (They’re <a>’s under the hood, but in writing your template(s), you import { Link } from 'gatsby'; and use <Link> instead of <a>.)

I wanted them styled identically — the ‘white-pill/box-shadow’ style. That code takes 26 lines. I didn’t want to repeat it twice, styling both an <a> and a <Link>, so I thought for a sec about how styled-components works, and realized I could share the styling pretty easily…

code screenshot

The function takes a styled-component and returns it with the template-literal styling applied. Drop both the styled.a and the styled(Link) through the function and you get both custom elements, without repeating a huge chunk of styling. Fun.

This entry was posted on June 23, 2018 with tags