组件下一个/图像不适用于 CSS

【问题标题】：component next/image are not working with CSS组件下一个/图像不适用于 CSS
【发布时间】：2021-11-04 23:45:53
【问题描述】：

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

代码：code link

【问题讨论】：

标签： javascript css next.js nextjs-image

【解决方案1】：

: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>
  );
}

【讨论】：

这对我有用。谢谢一堆。关于为什么会这样的任何想法......

【解决方案2】：

要使 className 在外部组件中起作用，您必须使用 :global 或 the resolve tag。

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

【讨论】：