Chakra-ui中InputLeftElement与Input的对齐问题（fontSize=2xl）

针对你遇到的fontSize="2xl"时InputLeftElement顶部错位的问题，直接给InputLeftElement设置内部对齐属性就能解决，以下是具体方案：

方案一：强制InputLeftElement内部元素居中 #

给InputLeftElement添加flex布局并设置垂直/水平居中，同时调整内边距匹配Input的高度：

<HStack>
  <Text fontSize={"2xl"}>{recordName ? recordName : "Record"}:</Text>
  <InputGroup
    width={"25%"}
    padding={5}
    fontSize={"2xl"}
  >
    <InputLeftElement
      display="flex"
      alignItems="center"
      justifyContent="center"
      px={3} // 调整水平内边距，和Input的内边距匹配
    >
      <Text fontSize={"2xl"}>{prefix}</Text>
    </InputLeftElement>
    <Input
      variant={"field"}
      fontSize={"2xl"}
      borderRadius={20}
      placeholder="enter value"
      py={2} // 统一垂直内边距，保证高度对齐
    />
  </InputGroup>
  <Button fontSize={"2xl"}>
    <BsSearch />
    &nbsp; Find Record
  </Button>
</HStack>

方案二：利用Chakra内置样式简化 #

如果InputGroup已经设置了fontSize，可以让InputLeftElement继承行高并设置自身居中：

<InputLeftElement
  alignSelf="center"
  lineHeight="inherit"
>
  <Text fontSize={"2xl"}>{prefix}</Text>
</InputLeftElement>

为什么之前的设置无效？ #

你之前在InputGroup上添加的对齐属性仅作用于InputGroup的子元素（InputLeftElement和Input整体），但InputLeftElement内部的Text元素默认是顶部对齐，需要给InputLeftElement本身设置内部对齐规则，才能让里面的文本和Input的文本基线/居中对齐。

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