reactjs - 如何使用函数更改 chakra ui 元素上的道具？

Question

我正在尝试根据函数 getSize 更改输入组的大小，然后根据 getBgColor 函数更改背景颜色。我不确定如何更改此 if 语句中元素的道具？

      function getSize() {
    if (search.size === 'small') {
      
        
    } else if (search.size === 'medium') {

    } else if (search.size === 'large') {

    } else if (search.size === 'xlarge') {

    }
  }
  function bgColor() {
    if (search.backgroundColor === 'orange') {

    } else if (search.backgroundColor === 'blue') {

    }
  }
  return (
    <>
      <Box>
        <HStack spacing="16px">
          <InputGroup {...search.size ? 'small' : 'medium'}>
            <InputLeftElement pointerEvents="none" children={<SearchIcon />} />
            <Input
              value={searchTerm}
              onChange={(event) =>
                setSearchTerm(event.target.value.toLocaleLowerCase)
              }
              placeholder="Search..."
              bg="white"
              borderRadius="none"
              size="lg"
            />
          </InputGroup>

标签： reactjstypescriptchakra-ui