Skip to content

Anson LowZF Blog

Shadowing Gatsby Theme Blog 2.0 Components

January 13, 2021

How to change bio content in the gatsby-theme-blog? Gatsby implement something called “component shadowing”

Visit gatsby theme blog component in Github to see all components we can shadow.

Click bio-content.js and found the following code:-

import React, { Fragment } from "react"
import { Styled } from "theme-ui"
* Shadow me to add your own bio content
const BioContent = () => (
Words by <Styled.a href="">Jane Doe</Styled.a>.
<br />
Change me. This is all quite default.
export default BioContent

It’s similar to the bio content we see in our project.

  • Create /src/gatsby-theme-blog/components/bio-content.js (the path must be same with the gatsby theme blog module)
  • Copy the code and paste into the bio-content.js file we just created.
  • change to the code as following:-
import React from "react"
const BioContent = () => (
<>I'm Anson Low, A Self Taught Developer Documenting Learning To Code</>
export default BioContent

A Self Taught Developer Documenting My Learning To Code
Reactjs, Nextjs, Gatsbyjs & MaterialUI