如何在next.js中设置img的样式 从“下一个/图像”导入图像 从“样式化组件”导入样式化 类别 收藏 资源

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

---

您可以使用

styled（）

包装组件并设置它们的样式，注意：并非所有组件都接受样式，请选中

您还可以给它

className

和基于它的样式，检查

从“下一个/图像”导入图像
从“样式化组件”导入样式化
const StyledImage=styled（图像）`
//你的风格在这里
高度：100px；//例子
宽度：100px；
`

类别


集合{“}


资源{“}

;

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>

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>;