GatsbyImage的className在gatsby-plugin-styled-jsx中失效但CSS Modules正常

问题根因 #

styled-jsx 默认启用样式隔离机制，会将<style jsx>块内的类名编译为带唯一哈希后缀的格式，且仅自动给当前组件内的原生HTML标签追加匹配的哈希类名。GatsbyImage属于第三方组件，你手动传递的card-image-wrapper类名不会被styled-jsx自动替换为编译后的哈希类名，最终DOM上的类名和生成的CSS规则类名不匹配，导致样式失效。

解决方案 #

下面提供三种可行的解决方式，可根据自己的使用场景选择：

方案1：使用:global标记类名 #

将需要应用到第三方组件的类名标记为全局类，styled-jsx不会对全局类名做哈希编译，能和你传递的原始类名匹配：

<GatsbyImage className="card-image-wrapper" image={logoImage} alt="company image" />

<style jsx>{`
  :global(.card-image-wrapper) {
    /* 这里写你的自定义样式，示例如下 */
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }
`}</style>

方案2：外层包裹原生DOM缩小作用域 #

如果不想直接暴露全局类名，可以给GatsbyImage外层套一个原生DOM标签，结合后代选择器和局部全局类实现精准匹配，避免样式污染全局：

<div className="image-card-wrap">
  <GatsbyImage className="card-image-wrapper" image={logoImage} alt="company image" />
</div>

<style jsx>{`
  .image-card-wrap :global(.card-image-wrapper) {
    /* 自定义样式 */
    width: 100%;
    border-radius: 8px;
  }
`}</style>

方案3：使用resolve方法生成哈希类名 #

如果不想使用任何全局类，可以调用styled-jsx提供的resolve方法手动拿到编译后的哈希类名，直接传递给GatsbyImage：

import { resolve } from 'styled-jsx/css'

// 提前编译样式拿到哈希类名和样式对象
const { className: imageClass, styles } = resolve`
  .card-image-wrapper {
    width: 100%;
    border-radius: 8px;
  }
`

// 组件内使用
export default function Card() {
  return (
    <>
      <GatsbyImage className={imageClass} image={logoImage} alt="company image" />
      {/* 必须插入生成的样式对象 */}
      {styles}
    </>
  )
}

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