如何直接设置 <Image /> 组件的边距？ [复制]答案

【问题标题】：How to set the margins of the <Image /> component directly? [duplicate]如何直接设置 <Image /> 组件的边距？ [复制]
【发布时间】：2021-09-28 00:24:52
【问题描述】：

我使用 Next.js <Image /> 组件将徽标加载到我的标题中。我想将组件定位在标题中。总之，我需要指定它的边距。

    <div className={styles.header}>
      <Image src={logo} alt="logo" />
      <nav>navbar</nav>
      <ul>
        <li>opt1</li>
        <li>opt2</li>
        <li>opt3</li>
      </ul>
    </div>

我知道我可以简单地将<Image /> 放在定位块内，但是有没有办法直接做到这一点？

【问题讨论】：

标签： reactjs image next.js

【解决方案1】：

不，没有。您可以通过将className 属性传递给next/image 来修改许多属性。但是由于边距是相对于包装器的，因此修改它对您没有帮助。

您正在尝试执行的操作需要在插入到img 标记上的包装器上设置样式，由next/image，目前这是不可能的（直接）。 请参阅this discussion 以获得更好的洞察力。

但是，作为一种解决方法（针对您的特定情况），您可以在标题上设置样式以选择包装器div。参考：CSS Combinators

.header > div {
   margin-left: 2em;
}

【讨论】：

感谢您的提示和澄清！

【解决方案2】：

我认为使用 styled-components 是一种不错的方式。

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


const StyledImage = styled(Image)`
  /* your custom style */
  margin: 10px;
`;

and using it: <StyledImage src={image_path} />

【讨论】：

【解决方案3】：

正如 Image 组件上的 nextjs documentation 所说，您可以使用 className 进行样式设置，就像使用通常的元素一样。

【讨论】：

【解决方案4】：

您可以将类名应用于<Image/> 组件。例如

<Image
  className="dummy-name" 
  src={src} 
  width={2400} 
  height={1598} 
  layout="responsive"/>

Documentation 列出了一些有用的属性。

【讨论】：