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

Posted 2023-02-19

【中文标题】gatsby-image-plugin，StaticImage 不能覆盖默认的包装样式（gatsby-image-wrapper & gatsby-image-wrapper-constrained style）

【英文标题】：gatsby-image-plugin, StaticImage cannot override the default wrapper style (gatsby-image-wrapper & gatsby-image-wrapper-constrained style)

【发布时间】：2021-06-20 02:38:27

【问题描述】：

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

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

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

有什么方法可以删除默认样式，或者有什么其他方法可以让传递的类正常工作吗？

【问题讨论】：

您如何使用 TailwindCSS？ （只是为了检查样式导入）

@FerranBuireu 嘿，谢谢您的回复！我遵循了tailwind官方网站给出的类似过程，关于如何使用 GatsbyJS https://tailwindcss.com/docs/guides/gatsby 1.installing the dependencies 2. Generating the config files 3. Importing the files into global.css tailwind base; tailwind components; tailwind utilities;

进行配置

有点大锤，但您是否考虑过在顺风配置中设置!important？ tailwindcss.com/docs/configuration#important

@rubie haha​​，我相信这会很容易，我正在检查是否有更好的方法来覆盖默认样式？

更新：尝试使用 !important 根据顺风配置，它不会覆盖 StaticImage 包装类，也破坏了整个设计。尝试了重要的：tailwind.config 方法上的“#id”，并将 ID 传递给 StaticImage 组件。

【参考方案1】：

我在我正在构建的网站上遇到了这个问题。我登陆的解决方案很烦人，因为它与项目的其余部分不一致，但我使用 JSS 来覆盖样式而不是顺风类名：

<StaticImage
        src="../images/image.jpg"
        style=
          position: 'absolute',
          height: '100%',
          width: '100%',
          inset: 0,
          objectFit: 'cover',
        
        placeholder="dominantColor"
        
        
        
        quality=90
      />

我放弃的类名（在我的本地构建中运行良好，只是在部署中没有）是：

className="absolute h-full inset-0 object-center object-cover w-full"

【参考方案2】：

我使用!Important 覆盖它。我目前没有看到任何 gatsby-plugin-image 选项默认禁用这些样式。