如何使用CSS或非内联样式为gatsby-image设置样式

嘿，我之前也踩过gatsby-image和媒体查询搭配的坑！别担心，这主要是因为gatsby-image生成的DOM结构和普通<img>不一样——它是用.gatsby-image-wrapper容器嵌套了picture、img等元素，直接给组件加className或者内联样式，往往没法命中真正需要调整的元素。下面给你几个亲测有效的解决办法：

方法一：用全局CSS/CSS模块（最直接） #

首先保持组件里的className配置不变：

<Img 
  sizes={this.props.data.img.sizes} 
  className="imageOfMine" 
/>

然后在你的全局CSS文件（比如src/styles/global.css）或者CSS模块里，通过嵌套选择器命中gatsby-image内部的元素：

/* 默认样式 */
.imageOfMine .gatsby-image-wrapper {
  height: 30px;
}

/* 媒体查询：屏幕宽度≥768px时调整 */
@media (min-width: 768px) {
  .imageOfMine .gatsby-image-wrapper img {
    height: 60px;
    width: auto;
  }
}

这里需要注意：.gatsby-image-wrapper是gatsby-image自动生成的容器类名，必须通过它定位到内部的img元素，才能覆盖组件默认的样式。

方法二：用CSS-in-JS库（比如styled-components） #

如果你的项目已经在用CSS-in-JS，用styled-components包裹gatsby-image是更灵活的选择：

1. 先安装依赖并配置插件：

npm install styled-components gatsby-plugin-styled-components

然后在gatsby-config.js里添加插件配置：

module.exports = {
  plugins: [
    'gatsby-plugin-styled-components',
    // 其他插件...
  ],
}

2. 创建一个封装好的StyledImg组件：

import styled from 'styled-components';
import Img from 'gatsby-image';

const StyledImg = styled(Img)`
  .gatsby-image-wrapper {
    height: 30px;
  }

  @media (min-width: 768px) {
    .gatsby-image-wrapper img {
      height: 60px;
    }
  }
`;

// 在组件中使用
<StyledImg sizes={this.props.data.img.sizes} />

方法三：用styled-jsx（需处理作用域） #

如果你坚持要用styled-jsx，需要注意它的作用域限制——默认样式只作用于当前组件的根元素，所以要使用全局选择器或者穿透语法：

<Img 
  sizes={this.props.data.img.sizes} 
  className="imageOfMine" 
/>

<style jsx global>{`
  .imageOfMine .gatsby-image-wrapper {
    height: 30px;
  }

  @media (min-width: 768px) {
    .imageOfMine .gatsby-image-wrapper img {
      height: 60px;
    }
  }
`}</style>

或者也可以用:global()语法来局部穿透：

<style jsx>{`
  :global(.imageOfMine .gatsby-image-wrapper) {
    height: 30px;
  }

  @media (min-width: 768px) {
    :global(.imageOfMine .gatsby-image-wrapper img) {
      height: 60px;
    }
  }
`}</style>

总结一下：核心就是要通过.gatsby-image-wrapper这个中间容器，定位到gatsby-image内部的img元素，这样媒体查询的样式才能生效。

内容的提问来源于stack exchange，提问作者Taylor Austin