My Countdown component implementation includes:
import styles from "./Countdown.module.scss";
import React from "react";
import useTimer from "hooks/useTimer";
import cn from "classnames";
function Countdown({ date,className="" }) {
const { days, hours, minutes, seconds } = useTimer(date);
return (
<div className={cn(styles.countdown,className)}>
<div className={styles.box}>
<p className={styles.number}>{days}</p>
<p className={styles.type}>Days</p>
</div>
<div className={styles.seperator}>:</div>
<div className={styles.box}>
<p className={styles.number}>{hours}</p>
<p className={styles.type}>Hours</p>
</div>
<div className={styles.seperator}>:</div>
<div className={styles.box}>
<p className={styles.number}>{minutes}</p>
<p className={styles.type}>Minutes</p>
</div>
</div>
);
}
export default Countdown;
The structure of my home page is as follows:
import styles from "../styles/Home.module.scss";
import Countdown from "components/ui/Countdown";
export default function Home() {
return (
<div className={styles.container}>
{/* top summary */}
<div className={styles.summary}>
<Countdown date={"10/06/2021"} className={style.homeCountdown} />
</div>
</div>
);
}
I am seeking a way to apply specific styling to the hours paragraph tag in the Countdown component when it is displayed on the home page. Is there any approach to achieve this without passing an additional prop?