CODEWITHSUNDEEP
cssreactjsnext.jscss-modules
Harel
Harel

Reputation: 581

Nextjs - Styling nested element with css modules

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

Upvotes: 5

Views: 1618

Answers (1)

gitel
gitel

Reputation: 51

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

Upvotes: 1

Related Questions