Gatsby：如何将 CSS 应用于 gatsby-image答案

【问题标题】：Gatsby: how to apply CSS to gatsby-imageGatsby：如何将 CSS 应用于 gatsby-image
【发布时间】：2019-07-15 16:14:30
【问题描述】：

我正在尝试将 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.5 秒，即使我在多个位置将其设置为 3 秒。

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

【问题讨论】：

我无法复制此内容，我将您在此处发布的内容完全复制到我正在从事的项目中，它是 working as expected
好的，很高兴知道，这意味着我的项目中的其他东西可能会导致这种情况。我在 OP 中添加了屏幕截图和完整代码。

标签： css gatsby

【解决方案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。

【讨论】：