Nextjs - Styling nested element with css modules

Question

I Have a Countdown component which looks like this

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;

I have the home page which looks like this

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 want to add a specific style to the hours p tag when I am on my home page

Are there any options to modify the hours' style in my Countdown component by giving one main className ("homeCountdown") to it from the home page? without giving specific prop to it

Answer 1

Another approach could be adding some kind of "config" prop to your component.

<Countdown date={"10/06/2021"} className={style.homeCountdown} config={{hideLabels: true}}/>

then handle this config in the component func