Gatsby:如何将CSS应用于gatsby-image

Question

我正在尝试将CSS应用于gatsby-image。Gatsby一直呈现没有应用样式的HTML。

在本例中，我尝试应用一个transition: 3s

<Picture ... className="test" style={{ transition: '3000ms'; }}/>
<style jsx>{`
     .test img {
         transition: 3000ms !important;
     }
     .test picture {
         transition: 3000ms !important;
     }
     img {
         transition: 3000ms !important;
     }
     picture {
         transition: 3000ms !important;
     }
     ...

当我在浏览器中打开呈现的页面时，我可以在devtools中看到生成<Picture>标签的位置：

<div class="test gatsby-image-wrapper" ...>
    <img ...> // placeholder SVG
    <picture ... <img...>> // actual image with what I believe is img fallback for older browsers

当我选择这3个元素中的任何一个时，我可以看到transition设置为0.5s，即使我在多个地方将其设置为3s。

Here是演示该问题所需的完整代码。Here是一个显示未应用CSS的屏幕截图。

Answer 1

在Gatsby中，它们有自己的结构来创建图像，以尽可能优化结果，因此，如果您想要向图像、图像的包装器或占位符添加自定义样式，您应该使用：

import Img from 'gatsby-image'

<Img style="<wrapper's_style_comes_here>" imgStyle="<img_style_comes_here>" placeholderStyle="<placeholder_style_comes_here>" .../>

有关更多信息，请查看Gatsby的图像插件website。