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 标签添加一个特定的样式

是否有任何选项可以通过从主页为其提供一个主 className（“homeCountdown”）来修改我的 Countdown 组件中的小时样式？没有给它特定的支持

Answer 1

另一种方法可能是向组件添加某种“config”属性。

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

然后在组件 func 中处理这个配置