如何在styled-component封装的StyledInput组件内添加图标

方案1：外层容器包裹组合（最常用，支持图标交互） #

input属于可替换元素，本身不支持嵌套任何子元素。你可以新增一个父容器组件，将图标和StyledInput都放在该容器内部，再把父容器的样式调整为输入框的外观，完全可以达到「图标在输入框内部」的视觉效果。
示例代码如下：

import styled from 'styled-components'

// 外层容器，模拟输入框的外观样式
const InputWrapper = styled.div`
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 12px;
  transition: all 0.3s;
  /* 输入框聚焦时的高亮效果，和原生输入框表现一致 */
  &:focus-within {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
  }
`

// 图标容器样式
const InputPrefixIcon = styled.span`
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  color: #909399;
  line-height: 1;
  /* 如果需要点击图标触发事件，加鼠标样式 */
  cursor: pointer;
`

// 调整原有的StyledInput，去掉自带的边框、内外边距冲突样式
const StyledInput = styled.input`
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 0;
  font-size: 14px;
  background: transparent;
  &::placeholder {
    color: #c0c4cc;
  }
`

// 封装后的带图标输入框组件
const InputWithIcon = (props) => {
  const { prefixIcon, ...inputProps } = props
  return (
    <InputWrapper>
      {prefixIcon && <InputPrefixIcon>{prefixIcon}</InputPrefixIcon>}
      <StyledInput {...inputProps} />
    </InputWrapper>
  )
}

// 使用示例
// <InputWithIcon prefixIcon={<SearchIcon />} placeholder="请输入搜索内容" />

方案2：背景图实现（适合无交互的静态图标） #

如果你的图标不需要点击、hover变色等交互逻辑，可以直接把图标作为StyledInput的背景图实现，不需要新增DOM节点：

/* 在原有StyledInput的样式中新增以下属性 */
background-image: url('你的图标base64编码或者本地路径');
background-repeat: no-repeat;
background-position: 12px center;
background-size: 16px 16px;
padding-left: 36px; /* 左侧留出图标的占位空间 */

方案3：伪元素实现（仅适用于带外层容器的自定义输入框组件） #

如果你封装的StyledInput本身就带有外层div等容器节点（不是直接基于input标签的样式封装），可以直接给外层容器添加::before/::after伪元素来渲染图标，无需额外新增子节点。

注意事项 #

• 如果需要实现图标点击清空、搜索等交互，优先选择方案1，直接给InputPrefixIcon绑定onClick事件即可
• 方案1中使用:focus-within伪类可以自动监听内部input的聚焦状态，不需要额外写JS逻辑同步样式

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