Chakra UI 图标未位于输入内

Question

我正在尝试将图标正确放置在输入的中间，该输入具有 size="xs"。然而，我所有的尝试都失败了，图标也一直在定位low/down。我也尝试过使用 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>

我做错了什么？

这是codesandbox。请注意，在这个 codesandbox 中，图标实际上位于 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 更改为 bottom in InputLeft class.

这是更新后的 codesandbox :

Answer 2

这个问题无需 CSS 即可解决。您只需将 size 属性也添加到 InputGroup。

查看更新后的代码 sandbox。

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

Chakra UI 图标未位于输入内

Chakra UI icon not positioned inside Input

chakra

reactjs

chakra-ui