在Gatsby中能否使用styled-components为StaticImage设置样式？

核心结论 #

不能直接使用 styled(StaticImage) 的方式给组件附加样式

原因说明 #

StaticImage 是 Gatsby 内置的静态资源优化组件，它的所有传参都会在构建阶段做静态解析，不支持接收运行时生成的动态参数。而 styled-components 本质是通过动态生成 className 并注入到目标组件的方式实现样式附加，这个动态传入的 className 无法被 StaticImage 的构建解析逻辑识别，因此直接包裹后样式不生效，甚至会导致组件渲染异常。

可行解决方案 #

有两种常用的兼容方案可以实现样式需求：

方案1：外层包裹自定义容器 #

给 StaticImage 套一层 styled-components 生成的容器节点，布局类样式加在容器上，需要控制图片本身的样式时使用后代选择器即可：

// 定义外层容器样式
const HeroImageWrapper = styled.div`
  grid-row: 1/1;
  grid-column: 7/-1;
  
  /* 控制图片本身样式 */
  & img {
    display: block;
  }
`

// 渲染逻辑
<HeroImageWrapper>
  <StaticImage
    src="../assets/images/hero.svg"
    alt="portfolio"
    placeholder="blurred"
  />
</HeroImageWrapper>

方案2：使用 StaticImage 原生样式属性 #

StaticImage 内置支持 style 和 imgStyle 两个静态可识别的样式属性，直接写入样式即可：

<StaticImage
  src="../assets/images/hero.svg"
  alt="portfolio"
  placeholder="blurred"
  style={{
    gridRow: '1/1',
    gridColumn: '7/-1',
    display: 'block'
  }}
/>

内容的提问来源于stack exchange，提问作者Radek Rozmus