reactjs 在Chakra-ui中将InputLeftElement与Input对齐

yws3nbqq  于 5个月前  发布在  React
关注(0)|答案(1)|浏览(68)

我试图将<LeftInputElement><Input>baselinecenter对齐。问题是我使用的是fontSize="2xl",并且元素最终未对齐。代码如下:

<HStack>
    <Text fontSize={"2xl"}>{recordName ? recordName : "Record"}:</Text>
    <InputGroup
      width="25%"
      padding={5}
      fontSize={"2xl"}
    >
      <InputLeftElement
        children={<Text fontSize={"2xl"}>{prefix}</Text>}
      />
      <Input
        variant="field"
        fontSize={"2xl"}
        borderRadius={20}
        placeholder="enter value"
      />
    </InputGroup>
    <Button fontSize={"2xl"}>
      <BsSearch />
      &nbsp; Find Record
    </Button>
  </HStack>

字符串
无论我做什么(display ='flex',content ='center',items ='center',self ='center')--当然不是一次全部对齐,在适用的情况下,我最终会让InputLeftElement与容器顶部对齐,其他所有内容都正确对齐。

yqlxgs2m

yqlxgs2m1#

InputLeftElement绝对位于InputGroup组件的左上方,因此它不会考虑InputGroup组件的填充更改。调整InputLeftElement边距以考虑添加到InputGroup的填充。

<HStack>
    <Text fontSize={"2xl"}>{recordName ? recordName : "Record"}:</Text>
    <InputGroup
      width="25%"
      padding={5}
      fontSize={"2xl"}
    >
      <InputLeftElement
        margin={5}
        children={<Text fontSize={"2xl"}>{prefix}</Text>}
      />
      <Input
        variant="field"
        fontSize={"2xl"}
        borderRadius={20}
        placeholder="enter value"
      />
    </InputGroup>
    <Button fontSize={"2xl"}>
      <BsSearch />
      &nbsp; Find Record
    </Button>
  </HStack>

字符串
Chakra playground showing solution

相关问题