如何解决脉轮 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
:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。