Soy un desarrollador bastante nuevo en formación y comencé a crear un sitio web simple. Tuve que reiniciar mi proyecto debido a algunos problemas que estaba teniendo y, sinceramente, me sentí mejor al comenzar de nuevo.

Mi problema está en algunas cosas:

Usando el proveedor de temas de componentes con estilo, luego envolví una hoja de estilo global y una hoja de tipografía y exporté ese archivo para poder usarlo en gatsby-broswer y gatsby-ssr. El problema es que parece que se están agregando algunos estilos mientras que otros no y el tema no funciona realmente, así como los colores.

 in gatsby-browser.js and gatsby-ssr.js ... export const wrapRootElement = ({ element }) => { return <Theme>{element}</Theme> } ------------------------------------------ ... this is a snippet from the actual theme component export const theme = { colors: { lightGreen: '#04BFAD', lightGreenTint: `rgba(4,191,173,0.70)`, lightGreenShadow: `#038073`, black: '#0E0F13', blackTint: `rgba(14,15,19,0.55)`, darkGreen: `#027373`, darkGreenShadow: `rgba(2,115,155,0.45)`, white: `#fff`, lightGrey: `#C1D4D9`, lightGreyTint: `rgba(193,212,217,.65)`, darkGrey: `#979DA6` }, breakpoints: { mobile: `(min-width: 428px)`, tablet: `(min-width: 768px)`, laptop: `(min-width: 1024px)`, desktop: `(min-width: 1280px)` } }; const Theme = ({ children }) => ( <ThemeProvider theme={theme}> <GlobalStyles /> <Typography /> {children} </ThemeProvider> ) export default Theme;

2. Parece que Gatsby-plugin-google-fonts en realidad no está importando la fuente. Quiero usar Monserrat y configurarlo en mi archivo de configuración de gatsby y gatsby en realidad no lo está usando

 in gatsby-config file { resolve: `gatsby-plugin-google-fonts`, options: { fonts: [ `Montserrat\:400`, ], display: 'swap' } } and a snippet from the Typography component html { font-family: Montserrat, sans-serif; color: ${({ theme : { colors : { lightGrey }}}) => lightGrey}; }

¿Puede alguien señalarme la dirección correcta? En mi proyecto anterior, que todavía tengo, estaba importando todos los archivos desde arriba a mi diseño y usando wrapPageElement y funcionó bien hasta que dejó de funcionar. Uso commonjs en mi archivo de configuración.

Como nota al margen: parece que el ecosistema de complementos de Gatsby está realmente desactualizado. No tengo mucha experiencia pero voy a buscar maneras de contribuir de alguna manera. ¿Me estoy enfocando en la herramienta incorrecta y debería cambiar a nextjs? Mi objetivo es crear sitios web para mí y mi familia inmediata y crear sitios web para las empresas en mi área y obtener una nueva carrera.