Can't import React theme

Question

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 1

导出的函数应该被称为wrapRootElement而不是wrappedRootElement 。