脉轮 UI 图标未定位在输入内

问题描述

我正在尝试将图标正确放置在输入的中间，该输入具有 size="xs"。但是，我所有的尝试都失败了，并且图标的位置一直太低/向下。我也尝试过使用 IconButton 而不是常规图标，但也没有用。

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

// ...

    <InputGroup>
      <InputLeftElement
        pointerEvents="none"
        children={<SearchIcon color="gray.300"/>}
        size="xs"
        />
      <Input
        variant="outline"
        size="xs"
        placeholder={``}
      />
    </InputGroup>

我做错了什么？

这是代码和盒子。请注意，在此代码和框中，图标实际上位于 Input 中间的上方（这仍然是错误的），而不是我本地机器上的下方。

https://codesandbox.io/s/optimistic-bartik-5ifsd?file=/src/App.tsx

解决方法

您可以通过将 className 添加到 chakra 组件并编辑样式来解决问题：

export default function App() {
  return (
    <InputGroup>
      <InputLeftElement
        className="InputLeft"
        pointerEvents="none"
        children={<SearchIcon className="SearchIcon" color="gray.300" />}
        size="xs"
      />
      <Input className="Input" variant="outline" size="xs" placeholder={``} />
    </InputGroup>
  );
} 

这里是样式：

.InputLeft {
  top: 3px !important;
  left: 3px !important;
}
.Input {
  padding-left: 24px !important;
}

如果在您的本地，图标位于输入下方。您可以在 top 类中将 bottom 更改为 InputLeft 。

这是更新的codesandbox：