Chakra UI v3 PinInput组件消除输入框间隙方案求助

各位好，我目前在使用Chakra UI v3的PinInput组件，想要彻底消除各个输入字段之间的间隙，试了好几种方法都没解决问题，特意来请教大家！

我已经尝试过的方案： #

我给PinInput.Root设置了gap={0}，还在sx里加了负边距和边框的样式，代码如下：

<PinInput.Root
  gap={0}
  sx={{
    '& > *': {
      marginRight: '-2px !important',
      borderRightWidth: '0px !important'
    },
    '& > *:last-child': {
      marginRight: '0px !important',
      borderRightWidth: '1px !important'
    }
  }}
>
  <PinInput.Input index={0} />
  <PinInput.Input index={1} />
  <PinInput.Input index={2} />
  <PinInput.Input index={3} />
  <PinInput.Input index={4} />
  <PinInput.Input index={5} />
</PinInput.Root>

当前的问题： #

就算设置了gap={0}和负边距，6个输入框之间还是能看到明显的间隙。

期望的效果： #

6个输入框完全紧挨在一起，没有任何可见间隙，看起来像是一个无缝的整体输入区域。

我的开发环境： #

• Chakra UI v3
• React 18
• TypeScript

我的问题： #

在Chakra UI v3里，怎么才能彻底消除PinInput输入框之间的间隙？有没有特定的CSS属性或者其他替代方案可以用呢？

内容来源于stack exchange