Is it possible to style StaticImage with styled-components in Gatsby?

Question

I try to style StaticImage in Gatsby with styled-components this way:

    const HeroImage = styled(StaticImage)`
        display: block;
        grid-row: 1/1;
        grid-column: 7/-1;
    `;

and render it like this:

    <HeroImage
      src="../assets/images/hero.svg"
      alt="portfolio"
      placeholder="blurred"
    />

I don't know why, but if this component is styled it doesn't show up. Is it possible to use styled-components to style StaticImage in Gatsby?

Answer 1

Is it possible to use styled-components to style StaticImage in Gatsby?

No, is not possible. It's a known restriction that relies in the fact that StaticImage doesn't support HOC (High-Order Components) like styled(StaticImage) is.

From the documentation:

The StaticImage component does not support higher-order components, which includes the styled function from libraries such as Emotion and styled-components. The parser relies on being able to identify StaticImage components in the source, and passing them to a function means this is not possible.