如何在next.js中设置图像样式 从“样式化组件”导入样式化 从“下一个/图像”导入图像 函数选择（）{ const NavSelection=styled.nav` 背景色：rgb（240240240）； 边缘底部：50px； ` const-UlFlex=styled.ul` 显示器：flex； 证明内容：周围的空间； 李{ 列表样式：无； } ` 返回( ) } 导出默认选择

问题:

• 如何设置图像样式以将

  position:abroute

  应用于图像组件
• 在图像组件中应用什么更时尚（此图像是徽标，而不是照片）
• 那么如何使用

  stylecompent

  或

  className

  定位徽标呢？我两个都试过了，但都不起作用

---

您可以在组件中添加

style={{{style HERE}

来定制它

import styled from 'styled-components'
import Image from 'next/image'

function Selection() {
    const NavSelection = styled.nav`
        background-color: rgb(240, 240, 240);
        margin-bottom: 50px;
    `
    const UlFlex = styled.ul`
        display: flex;
        justify-content: space-around;
        li{
            list-style: none;
        }
    `
    return (
        <div>
        <NavSelection>
        <Image
            src="/logo-crazy-monkey-hd-png-download-800x11312396344-pngfind-crazy-hd-png-840_886.png"
            width={100}
            height={100}
        />
        </NavSelection>
        </div >
    )
}

export default Selection

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