Chakra UI size为xs的Input内图标无法垂直居中如何解决？

问题原因 #

你代码的问题出在 InputLeftElement 的 size="xs" 属性仅调整自身容器的基础宽高参数，不会自动同步内部图标的尺寸与垂直对齐规则：xs 规格的 Input 高度远小于默认规格，Chakra UI 内置图标的默认尺寸、对齐参数是适配大尺寸输入框的，就会出现上下偏移的情况。本地和线上表现不一致是不同环境下默认行高、字体继承规则存在差异导致的。

解决方案 #

直接给图标和 InputLeftElement 补充对齐和尺寸参数即可，修改后的代码如下：

import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react"
import { SearchIcon } from "@chakra-ui/icons"

// ...

    <InputGroup>
      <InputLeftElement
        pointerEvents="none"
        size="xs"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <SearchIcon color="gray.300" fontSize="12px" />
      </InputLeftElement>
      <Input
        variant="outline"
        size="xs"
        placeholder={``}
        lineHeight="1"
      />
    </InputGroup>

如果还有细微偏移，可以给 SearchIcon 加上 transform="translateY(1px)" 这类微调属性适配你的本地样式环境。

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