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

【问题标题】：how to style img in next.js如何在 next.js 中设置 img 的样式
【发布时间】：2021-08-16 00:41:19
【问题描述】：

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>

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

【问题讨论】：

标签： next.js styled-components

【解决方案1】：

您可以使用styled() 包装组件并为其设置样式，注意：并非所有组件都接受样式，请检查extending Docs

你也可以给它className 和基于它的风格，检查 Image Docs

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

【讨论】：