如何減少帶有文本和圖標的 HStack 的高度

Question

我想減少帶有文本和圖標的 Hstack 的高度。 '老將' hstack 的高度應該更小。 我已經使用了我能想到的所有東西，但沒有任何效果我也使用了 broderwidth 來檢查盒子的大小。

因為我是本機基礎/反應本機的新手，所以將不勝感激我的代碼在下面提到

<HStack
          justifyContent={'center'}
          // m="2"
          // mb="1"
          // p={0}
          bg={'#552582'}
          // rounded="xl"
          alignSelf="auto">
          <Box
            borderWidth={1}
            w="15%"
            alignItems={'flex-start'}
            justifyContent={'center'}
            p="1"
            alignSelf="auto">
            <MaterialIcons name={'lock'} size={25} color="#F5F5F5" />
          </Box>
          <Box
            borderWidth={1}
            w="65%"
            justifyContent={'center'}
            _text={{
              fontSize: '5xl',
              fontWeight: 'bold',
              color: '#FDB927',
            }}>
            Veteran
          </Box>
        </HStack>

Answer 1

Kashif 請檢查：

更新的答案

 <HStack justifyContent={'center'}
        
          p={0}
           style={{padding:0, height:150}} // updated: add height here
          bg={'#552582'}
          
          alignSelf="auto">
       <Box
            borderWidth={1}
         
            p={0}
            style={{padding:0}}
            justifyContent={'center'}
            _text={{
              fontSize: 'md', // updated here
              fontWeight: 'bold',
              color: '#FDB927',
            }}>
            Veterans
          </Box>
        
      </HStack>

讓我知道這是否有幫助