css - Nextjs - 使用 css 模块设计嵌套元素

Question

我有一个看起来像这样的倒计时组件

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;

我的主页看起来像这样

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

当我在主页上时，我想为 hours p 标签添加特定样式
是否有任何选项可以通过从主页给它一个主类名(“homeCountdown”)来修改我的倒计时组件中的小时样式？没有给它特定的支持

Answer 1

另一种方法可能是向您的组件添加某种“配置” Prop 。

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

然后在组件 func 中处理此配置