如何使用styled-components无需行内CSS实现div内a标签嵌套图片正常展示

问题核心原因 #

• 你定义的styled组件iconSocial首字母小写，React规范要求自定义组件必须大写开头，小写标签会被识别为原生HTML元素，导致你写的样式根本没有生效，父容器没有宽高限制，SVG图片本身没有显式设置宽高的情况下就会无法展示。
• 你之前行内样式直接生效是因为是直接加在原生div上，不存在组件识别的问题。
• 额外提一句你代码里的alt={(iconName, 'icon')}是不必要的逗号表达式，实际返回值只有后面的'icon'，直接写明确的alt文本即可。

解决方法 #

写法1：仅修复styled组件命名（最快捷）

// 首字母必须大写
const IconSocial = styled.div`
  width: 25px;
  margin: 0 5px;
`;

// 调用组件也用大写开头
<IconSocial>
  <a href={link}>
    <img src={iconName} alt="社交图标" />
  </a>
</IconSocial>

写法2：给img也加上样式适配更稳妥（防止SVG本身无内置尺寸）

如果修改组件命名后还是显示异常，说明你的SVG文件本身没有设置默认宽高，给子元素img加继承样式即可：

const IconSocial = styled.div`
  width: 25px;
  margin: 0 5px;

  img {
    width: 100%;
    height: auto;
    display: block;
  }
`;

<IconSocial>
  <a href={link}>
    <img src={iconName} alt="社交图标" />
  </a>
</IconSocial>

内容的提问来源于stack exchange，提问作者mongonoob