Трехзначный номер в DaisyUI/Обратный отсчет Next.Js не отображается ⇐ CSS

[Anonymous]

Итак, я занимаюсь обратным отсчетом для веб-сайта Next.js и использую компонент обратного отсчета daisyUI, но любая цифра количества дней выше 99 не отображается должным образом, как показано ниже:

[img]https:/ /i.sstatic.net/V0Ivuoqt.png[/img]
Поэтому изначально у меня есть простой обратный отсчет:

Код: Выделить всё

 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]);

Вот как я визуализирую обратный отсчет

Код: Выделить всё

{String(timeLeft.days).padStart(3, '0')}

days


{String(timeLeft.hours).padStart(2, '0')}

hours


{String(timeLeft.minutes).padStart(2, '0')}

min


{String(timeLeft.seconds).padStart(2, '0')}

sec

Я добавил

Код: Выделить всё

String(timeLeft.seconds).padStart(3, '0')

как попытка решить эту проблему, но безрезультатно.
Есть идеи, как это исправить?

Подробнее здесь: https://stackoverflow.com/questions/784 ... displaying