Nuevo en Gatsby y no puedo superar este problema. Creé una nueva página y en esa página quiero cambiar un valor que se usa en el archivo de plantilla para el logotipo. En la página 'my-mobile-app.js', necesito usar el logotipo 'pulso'. Lo agregué al valor predeterminado de exportación a continuación, pero ¿cómo lo llamo desde la página específica? Agregar dark={true} a <Img> lo cambia globalmente como se esperaba. Déjame saber si esto no está claro.
Esta es la estructura de la página:
my-mobiel-app.js (nueva página que debe tener un logotipo diferente al resto)
src/components/layout.js
src/components/Header/Header.js
Y finalmente src/components/Logo.js tiene este código:
export default ({ white, dark, pulse, ...props }) => { const logo = useStaticQuery(graphql` query { white: file(relativePath: { eq: "logo/Logo-whitebg.png" }) { childImageSharp { fluid { ...GatsbyImageSharpFluid_noBase64 } } } dark: file(relativePath: { eq: "logo/Logo-darkbg.png" }) { childImageSharp { fluid { ...GatsbyImageSharpFluid_noBase64 } } } pulse: file(relativePath: { eq: "logo/Logo-pulse.svg" }) { childImageSharp { fluid { ...GatsbyImageSharpFluid_noBase64 } } } } `) } const typeLogo = (white && 'white') || (dark && 'dark') || (pulse && 'pulse') || "white" return <Link to="/"> <Img fluid={logo[typeLogo].childImageSharp.fluid} alt="Tradovate Logo" {...props} loading="eager" fadeIn={false} /> </Link>Es preferible exportar un componente con nombre (puede ser predeterminado) como:
export default function Logo ({ white, dark, pulse, ...props }) => { const logo = useStaticQuery(graphql` query { white: file(relativePath: { eq: "logo/Logo-whitebg.png" }) { childImageSharp { fluid { ...GatsbyImageSharpFluid_noBase64 } } } dark: file(relativePath: { eq: "logo/Logo-darkbg.png" }) { childImageSharp { fluid { ...GatsbyImageSharpFluid_noBase64 } } } pulse: file(relativePath: { eq: "logo/Logo-pulse.svg" }) { childImageSharp { fluid { ...GatsbyImageSharpFluid_noBase64 } } } } `) } const typeLogo = (white && 'white') || (dark && 'dark') || (pulse && 'pulse') || "white" return <Link to="/"> <Img fluid={logo[typeLogo].childImageSharp.fluid} alt="Tradovate Logo" {...props} loading="eager" fadeIn={false} /> </Link>Entonces donde quieras solo necesitas:
import Logo from '../path/to/your/brand/new/component' <Logo white /> Cambie white a dark según corresponda. Creo que sería más claro si creas un booleano como isWhite o isDark y lo estableces como predeterminado como true o false , lo que sea que funcione para ti, como:
export default function Logo ({ isWhite=false, pulse, ...props }) => {} De esa manera, no necesita pasar siempre un <Logo isWhite={false} /> porque está configurado como valor predeterminado en false. Si lo pasa como <Logo isWhite={true} /> anulará la configuración predeterminada.