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

问题描述

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

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

当我在主页上时，我想为小时 p 标签添加特定样式

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

解决方法

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

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

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