时间戳

首页 > 解决方案 > gatsby-image-plugin，StaticImage 不能覆盖默认的包装样式（gatsby-image-wrapper & gatsby-image-wrapper-constrained style）

gatsby - gatsby-image-plugin，StaticImage 不能覆盖默认的包装样式（gatsby-image-wrapper & gatsby-image-wrapper-constrained style）

问题描述

我将 GatsbyJS 与 TailwindCSS 一起使用，当我尝试将 tailwind 样式从 gatsby-image-plugin 传递到 StaticImage 的包装器时，现有样式不会被覆盖（即 gatsby-image-wrapper 和 gatsby-image-wrapper-constrained 样式）。

<StaticImage src="https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="just an image" placeholder="blurred" className="absolute z-0" objectFit="cover" />

包装样式

包装器的位置保持不变（gatsby-image-wrapper & gatsby-image-wrapper-constrained），而传递给组件的一些类被忽略。

有什么方法可以删除默认样式，或者有什么其他方法可以让类通过工作？

标签： gatsbygatsby-image

解决方案

这是由于在用户 CSS（包括 Tailwind）之后gatsby-plugin-image输出其样式而导致的错误，这将覆盖所有具有相同 CSS 特异性的类，因为这些类稍后在 DOM 中声明。如果你检查 gatsby 构建的页面，你也会注意到这个顺序：

<style>
.absolute {
    position: absolute
}

.test-class-dont-override {
    display: "block"
}
</style>
<meta name="generator" content="Gatsby 4.4.0"/>
<style>
.gatsby-image-wrapper {
    position: relative;
    overflow: hidden
}

.gatsby-image-wrapper picture.object-fit-polyfill {
    position: static!important
}

.gatsby-image-wrapper img {
    bottom: 0;
    height: 100%;
    left: 0;
    margin: 0;
    max-width: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    object-fit: cover
}

.gatsby-image-wrapper [data-main-image] {
    opacity: 0;
    transform: translateZ(0);
    transition: opacity .25s linear;
    will-change: opacity
}

.gatsby-image-wrapper-constrained {
    display: inline-block;
    vertical-align: top
}
</style>

目前唯一的解决方法（直到盖茨比对此有所作为）是!important像其他人所说的那样在顺风类前面加上前缀。我已经在 Gatsby 的问题页面上提交了一个错误，希望它很快会得到一些关注。 https://github.com/gatsbyjs/gatsby/issues/34457

编辑：显然，背后的维护者gatsby-plugin-image无意修复此错误，因为他希望防止用户出于“性能和灯塔”的原因轻易覆盖这些样式。回复链接： https ://github.com/gatsbyjs/gatsby/issues/34457#issuecomment-1025689173

推荐阅读