Can’t import React theme

I am working with Gatsby and have some code in my gatsby-browswer.js file which is importing a theme, but the changes don’t reflect on my webpage.

My gatsby-browser file:

import React from "react"
import { createGlobalStyle, ThemeProvider } from "styled-components"
import Theme from "./src/themes/theme"

const GlobalStyle = createGlobalStyle`
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html, body {
        font-family: ${props => props.theme.fonts.main};
        height: 100%;
        background-color: ${props => props.theme.colors.light1};
    }
`
export const wrappedRootElement = ({ element }) => (
  <ThemeProvider theme={Theme}>
    <GlobalStyle />
    {element}
  </ThemeProvider>
)

My theme file:

export default {
  fonts: {
    main: "Muli, sans-serif",
    code: "Roboto Mono, monospace",
  },
  colors: {
    main1: "hsl(207, 70%, 59%)",
    main2: "hsl(207, 70%, 94%)",
    dark1: "hsl(227, 2%, 12%)",
    dark2: "hsl(227, 2%, 26%)",
    dark3: "hsl(227, 2%, 64%)",
    light1: "hsl(0, 0%, 97%)",
    light2: "hsl(0, 0%, 99%)",
  },
  breakpoints: {
    mobile: "only screen and (max-width: 50rem)",
    tablet: "only screen and (max-width: 65rem)",
  },
  spacings: {
    xxSmall: ".25rem",
    xSmall: ".5rem",
    small: "1rem",
    medium: "2rem",
    large: "3rem",
    xLarge: "4rem",
    xxLarge: "6rem",
  },
  animations: {
    button: "box-shadow 0.3s ease",
    link: "color 0.2s ease",
  },
  shadows: {
    shadow1: "0px 5px 20px rgba(30, 30, 31, 0.05)",
  },
}

The page is a very simple “Hello World”, but when I check the font and everything else on the webpage, they seem to be the default ones.

Answer

The exported function should be called wrapRootElement instead of wrappedRootElement.

Advertisement

Answer