在 Gatsby 中将 CSS 与 imgStyle 结合使用

如何解决在 Gatsby 中将 CSS 与 imgStyle 结合使用

有没有办法将 CSS 与 gatsby-image 的 imgStyle 属性一起使用？

例如，我希望能够做类似的事情

<!--In the HTML -->
<Img className="squiggle" fluid={data.squiggle.childImageSharp.fluid}/>

和

/*In the CSS */
.squiggle {
    position: absolute;
    left:-100px;
    width:465px;
    height:282px;
}

我不喜欢必须做类似事情的语法

<Img imgStyle={{
    position: "absolute",left:"-100px",width:"465px",height:"282px",}}
    fluid={data.squiggle.childImageSharp.fluid}/>

解决方法

当然可以，您最初的方法是完全有效的：

但是，您必须记住，gatsby-image 的使用将图像包装在一系列嵌套的 <div> 中，从而产生模糊效果等。所以你可能需要添加一些额外的规则。此外，gatsby-image 使用了一些内联样式，因此它们在您的 CSS 文件中具有优先权，您可能需要使用 !important 规则来覆盖它。

例如，您提供的结构将输出：

<div class="squiggle gatsby-image-wrapper" style="position: relative; overflow: hidden; display: inline-block; width: 400px; height: 400px;"><img aria-hidden="true" src="data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCA//EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAGbvqebrTh3CFdgn//EAB4QAAIBAwUAAAAAAAAAAAAAAAECEQADEBITISIx/9oACAEBAAEFAkPKu2ugu0Ce8ti6YUef/8QAGREAAgMBAAAAAAAAAAAAAAAAAAIQESFC/9oACAEDAQE/AVXCjmP/xAAYEQACAwAAAAAAAAAAAAAAAAABEAIhQf/aAAgBAgEBPwGRtav/xAAfEAACAQMFAQAAAAAAAAAAAAAAATEQIVECERJBYYH/2gAIAQEABj8C8OOtL5Rw98FuiUS5LZp//8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFRYfH/2gAIAQEAAT8hV7DZgQpiogs8kq6Qvfkz5ELHk9McjFpZu1s//9oADAMBAAIAAwAAABA050D/xAAYEQEAAwEAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxDb1ZOkv//EABgRAQADAQAAAAAAAAAAAAAAAAABETFB/9oACAECAQE/EMC3KH//xAAeEAEBAAICAgMAAAAAAAAAAAABEQAhMXFBUYGx4f/aAAgBAQABPxAMhqKuvU+VwW/heOnLhMEC8ACCuNTSixgb4mJ+Tv8AeGlaRyWBPvEx2wcqOXZTvP/Z" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0;"><picture><source type="image/webp" srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6a64a/some-image-name.webp 1x,/static/9f5c7a959032e5fe2cba348695d4cee8/ab687/some-image-name.webp 1.5x,/static/9f5c7a959032e5fe2cba348695d4cee8/88bdf/some-image-name.webp 2x"><source srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg 1x,/static/9f5c7a959032e5fe2cba348695d4cee8/7b2a1/some-image-name.jpg 1.5x,/static/9f5c7a959032e5fe2cba348695d4cee8/d1f84/some-image-name.jpg 2x"><img srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg 1x,/static/9f5c7a959032e5fe2cba348695d4cee8/d1f84/some-image-name.jpg 2x" src="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg" alt="" width="400" height="400" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: none 0s ease 0s;"></picture><noscript><picture><source type='image/webp' srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6a64a/some-image-name.webp 1x,/static/9f5c7a959032e5fe2cba348695d4cee8/88bdf/some-image-name.webp 2x" /><source srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg 1x,/static/9f5c7a959032e5fe2cba348695d4cee8/d1f84/some-image-name.jpg 2x" /><img loading="lazy" width="400" height="400" srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg 1x,/static/9f5c7a959032e5fe2cba348695d4cee8/d1f84/some-image-name.jpg 2x" src="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg" alt="" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div>

注意：这是我为这个答案制作的一个例子。这只是一个近似值，路径可能不同但主要结构没有

如您所见，您的类名在外部包装器中，因此为了达到您想要的效果，您需要指向一些内部 HTML 标记，例如 <img>，创建一个选择器，如：{{ 1}}。