我正在使用ChakraUI。我想创建一个水平滚动的视图。
有一个显示/添加标记的组件，如下所示。

import { Button, FormControl, HStack, Input, Tag, TagLabel, VStack } from '@chakra-ui/react'
import { useState } from 'react'

type Props = {
  datas: string[]
}

export function Demo(props: Props) {
  const [datas, _] = useState<string[]>(props.datas)

  return (
    <VStack>
      <HStack spacing={4}>
        {datas.map((data) => (
          <Tag size='md' key={data} borderRadius='full' variant='solid' colorScheme={'green'}>
            <TagLabel>{data}</TagLabel>
          </Tag>
        ))}
      </HStack>
      <FormControl>
        <HStack>
          <Input w={'200px'} id='item' placeholder='new item' />
          <Button title={'Add'} onClick={() => {}}>
            Add
          </Button>
        </HStack>
      </FormControl>
    </VStack>
  )
}

像这样使用

<VStack spacing={4} align='center'>
        <Demo
          datas={[
            'this is sample data',
            'this is sample data',
            'this is sample data',
            'this is sample data',
            'this is sample data',
            'this is sample data',
            'this is sample data',
            'this is sample data',
          ]}
        ></Demo>
　　・・・

我想使标记排列的区域水平滚动。
我该怎么做呢？
我知道这可以通过使用特定的CSS属性来解决。
然而，我不熟悉网络前端技术，所以我不知道如何做。
我读到过overflow ='auto '和whitespace = {'nowrap '}可以工作，但我做不到。
我希望得到答复。

<HStack w={'full'} spacing={4} overflow='auto' whiteSpace={'nowrap'}>