reactjs - Chakra UI 图标未定位在 Input 内

Question

我正在尝试将图标正确放置在输入中间，该输入具有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

Answer 1

您可以通过添加组件和编辑样式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为。bottomInputLeft

这是更新的codesandbox：