DaisyUI+Next.js倒计时组件无法正确显示三位数天数

在Next.js项目中使用DaisyUI倒计时组件时，当天数超过99（变为三位数）时，组件无法正常显示，异常效果如下：

我的倒计时逻辑代码：

const targetDate = new Date('2024-09-01T07:00:00');

const [timeLeft, setTimeLeft] = useState({
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0,
});

useEffect(() => {
  const updateCountdown = () => {
    const currentTime = new Date();
    const difference = targetDate - currentTime;

    if (difference < 0) {
      clearInterval(intervalId);
      setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
    } else {
      const days = Math.floor(difference / (1000 * 60 * 60 * 24));
      const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((difference % (1000 * 60)) / 1000);
      setTimeLeft({ days, hours, minutes, seconds });
    }
  };

  const intervalId = setInterval(updateCountdown, 1000);
  return () => clearInterval(intervalId);
}, [targetDate]);

渲染部分代码：

<div className="grid grid-flow-col gap-5 text-center auto-cols-max">
  <div className="flex flex-col" style={{ marginBottom: '10px' }}>
    <span className="countdown font-mono text-5xl text-black">
      <span style={{ "--value": String(timeLeft.days).padStart(3, '0') }}>{String(timeLeft.days).padStart(3, '0')}</span>
    </span>
    days
  </div>
  <div className="flex flex-col">
    <span className="countdown font-mono text-5xl text-black">
      <span style={{ "--value": String(timeLeft.hours).padStart(2, '0') }}>{String(timeLeft.hours).padStart(2, '0')}</span>
    </span>
    hours
  </div>
  <div className="flex flex-col">
    <span className="countdown font-mono text-5xl text-black">
      <span style={{ "--value": String(timeLeft.minutes).padStart(2, '0') }}>{String(timeLeft.minutes).padStart(2, '0')}</span>
    </span>
    min
  </div>
  <div className="flex flex-col">
    <span className="countdown font-mono text-5xl text-black">
      <span style={{ "--value": String(timeLeft.seconds).padStart(2, '0') }}>{String(timeLeft.seconds).padStart(2, '0')}</span>
    </span>
    sec
  </div>
</div>

我曾尝试用String(timeLeft.days).padStart(3, '0')补零，但问题依旧。

解决办法 #

DaisyUI的countdown组件默认是为两位数设计的，固定了宽度和动画相关样式，导致三位数内容显示异常。需要自定义CSS调整天数容器的样式：

1. 给天数的countdown容器添加自定义类countdown-3digits：

<span className="countdown countdown-3digits font-mono text-5xl text-black">
  <span style={{ "--value": String(timeLeft.days).padStart(3, '0') }}>{String(timeLeft.days).padStart(3, '0')}</span>
</span>

2. 添加全局或组件内的自定义CSS：

.countdown-3digits span {
  width: 3em; /* 适配三位数的宽度 */
}
.countdown-3digits:before,
.countdown-3digits:after {
  width: 3em; /* 同步动画元素的宽度 */
}

调整后，三位数的天数就能正常显示并播放倒计时动画了。

内容的提问来源于stack exchange，提问作者Joseph Attia