reactjs - 下一个图像不采用类属性
问题描述
我正在使用 Next.js 并next/image
显示图像,但 CSS 在其中不起作用。该图像为 SVG 格式,我已将其放在公共文件夹中。我正在使用 Tailwind CSS。
<Image
className="mt-3"
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
height="24"
width="24"
/>
我不确定为什么它不起作用并且它没有反映在浏览器中。任何帮助将不胜感激!
解决方案
以next/image
这种方式设置组件的边距目前不起作用。有关更多详细信息,请参阅相关的GitHub 讨论。
next/image
在组件内部,img
元素和包装它的元素具有覆盖通过的某些值的内联样式className
。
作为一种解决方法,您可以添加一个包装器元素并将margin
样式应用到它。
<div className="mt-3">
<Image
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
height="24"
width="24"
/>
</div>