在盖茨比中使用CSS与imgStyle

Question

是否有办法使用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}/>

Answer 1

当然可以，您的初始方法是完全有效的:

然而，你必须记住，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/7b2a1/some-image-name.jpg 1.5x,
/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/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 loading="lazy" width="400" height="400" 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" 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>，创建一个选择器，如:.squiggle img{}。