组件 next/image 无法与 CSS 一起使用

Question

我试图在图像周围制作边框，但由于图像组件 css，我的自定义 css 无法正常工作，它覆盖了我的自定义 css 并且还应用了 tailwind和 bootstrap 来修复它，但我无法修复它。现在我没有得到任何修复它的线索我阅读了一些 github 问题，但它们不足以修复它。

代码:code link

Answer 1

要使 className 在外部组件中工作，您必须使用 :global or the resolve tag.

并且要使用 tailwindcss 覆盖内联样式，您可以使用 important modifier，例如 !border。

Answer 2

如何将 :global(_selectors_here_) 与 !important 结合使用的示例：

import Image from "next/image";
import sli from "./sl.png";
export default function IndexPage() {
  return (
    <div>
      <Image className="ava" src={sli} alt="hello" />
      <style jsx>{`
        :global(.ava) {
          border: 3px solid red !important;
        }
      `}</style>
    </div>
  );
}

组件 next/image 无法与 CSS 一起使用

component next/image are not working with CSS

javascript

css

next.js

nextjs-image