如何在next.js中设置img样式

Question

import Image from 'next/image'
import styled from 'styled-components'
<Grid container  >

<Image className='logo'
src="/logo-crazy-monkey-hd-png-download-800x11312396344-pngfind-crazy-hd-png-840_886.png"
width={100}
height={100}
/>

<Grid item xs={6}>
<UlFlex>
<li><Link href="/categories" >CATEGORIES</Link></li>
<li><Link href="/collections">COLLECTIONS </Link> </li>
<li><Link href="resources" >RESOURCES</Link> </li>
</UlFlex>
</Grid>

i在next.js中设置样式和定位imge我要使用什么样式组件，或者是否有更好的方法？

Answer 1

您可以用styled()包装组件并对其进行样式设置，注意：并非所有组件都接受样式，请检查扩展文档

你也可以给它className和基于它的样式，检查图像文档

import Image from 'next/image'
import styled from 'styled-components'
const StyledImage = styled(Image)`
// your styles here
height: 100px; // example
width: 100px;
`
<Grid container>
<StyledImage
className="logo"
src="/logo-crazy-monkey-hd-png-download-800x11312396344-pngfind-crazy-hd-png-840_886.png"
width={100}
height={100}
/>
<Grid item xs={6}>
<UlFlex>
<li>
<Link href="/categories">CATEGORIES</Link>
</li>
<li>
<Link href="/collections">COLLECTIONS </Link>{" "}
</li>
<li>
<Link href="resources">RESOURCES</Link>{" "}
</li>
</UlFlex>
</Grid>
</Grid>;