是否可以在 Gatsby 中使用 styled-components 设置 StaticImage 的样式？

Posted 2023-03-08

【中文标题】是否可以在 Gatsby 中使用 styled-components 设置 StaticImage 的样式？

【英文标题】：Is it possible to style StaticImage with styled-components in Gatsby?

【发布时间】：2021-12-09 21:51:07

【问题描述】：

我尝试用这种方式在 Gatsby 中使用 styled-components 设置 StaticImage 的样式：

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

并像这样渲染它：

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

我不知道为什么，但是如果这个组件被设置了样式，它就不会显示出来。在 Gatsby 中是否可以使用 styled-components 为 StaticImage 设置样式？

【参考方案1】：

是否可以使用 styled-components 来设置 StaticImage 的样式 盖茨比？

不，不可能。这是一个已知的限制，它依赖于 StaticImage 不支持像 @ 这样的 HOC（High-Order Components）这一事实987654323@是。

来自documentation：

StaticImage 组件不支持高阶组件， 其中包括来自 Emotion 等库的 styled 函数 和样式组件。解析器依赖于能够识别 StaticImage 源中的组件，并将它们传递给函数 表示这是不可能的。