如何为React Flip Number计数器设置样式并添加数字间距

以下是针对你的访客计数器样式问题的具体解决方法：

1. 实现数字间的间距 #

你可以通过两种方式快速添加数字间距：

• 利用Chakra UI HStack的gap属性：给包裹FlipNumbers的HStack设置间隙值，适配不同屏幕尺寸
• 通过组件wrapperStyle自定义间距：给每个数字单元添加外边距，精准控制间距大小

2. 自定义样式匹配预期效果 #

结合组件属性和Chakra样式系统，你可以调整字体、尺寸、圆角、阴影等细节，匹配示例图样式：

修改后的完整代码 #

type visitortype = {
  count: number;
};

const Footer = () => {
  const [visitor, setVisitor] = useState<visitortype>();

  useEffect(() => {
    fetch('https://count.cab/hit/ghG6Oirn0b')
      .then(response => response.json())
      .then(allVisitor => setVisitor(allVisitor))
      .catch(error => console.log(error));
  }, []);

  return (
    <GridItem
      w="100%"
      h={{ base: "80px", lg: "300px" }}
      colSpan={{ base: 8, lg: 4 }}
    >
      <VStack
        align={{ base: "center", lg: "stretch" }}
        marginTop={{ base: "0", lg: "60px" }}
        marginLeft={{ base: "0", lg: "50px" }}
      >
        <Box w={{ base: "100px", lg: "220px" }} paddingBottom={"10px"}>
          <Image src={imgLogoMd} alt="Logo" w="100%" />
          {/* 用HStack的gap控制数字整体间距 */}
          <HStack gap={{ base: '1px', lg: '4px' }}>
            <FlipNumbers 
              height={{ base: 25, lg: 36 }} 
              width={{ base: 20, lg: 30 }}  
              color="white" 
              background="#8D0000"
              // 自定义数字单元样式
              numberStyle={{
                fontSize: { base: 16, lg: 22 },
                fontWeight: 'bold',
                textAlign: 'center'
              }}
              // 给每个数字容器添加额外间距（可选，与HStack二选一）
              // wrapperStyle={{ marginRight: '3px' }}
              play perspective={100} 
              numbers={`${visitor?.count ?? 0}`}
              // 添加圆角增强视觉效果
              style={{ borderRadius: '4px' }}
            />
          </HStack>
        </Box>
      </VStack>
    </GridItem>
  );
};

3. 进阶样式优化 #

如果需要更细致的样式控制，可通过自定义CSS覆盖组件默认样式：

/* 给FlipNumbers组件添加类名后，调整数字单元样式 */
.flip-counter .flip-number__digit {
  /* 去掉最后一个数字的右边距 */
  &:last-child {
    margin-right: 0;
  }
  /* 添加阴影效果 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

然后给FlipNumbers组件添加className="flip-counter"即可。

内容的提问来源于stack exchange，提问作者Shitta 25