css - 如何在下一个 js 中扩展 css 模块？

Question

我是 nextjs 新手，我对 CSS 模块有疑问

我有一个看起来像这样的产品组件

import styles from "./Product.module.css"
function Product({className=""}) {
  return (
    <div class={`${styles.container} ${className}`}>
      <p className={styles.title}>product</p>
    </div>
  )
}

然后我想创建另一个名为 ProductCard 的组件，它使用 Product 组件但需要在其中扩展 p 标签

import styles from "./ProductCard.module.css"
function ProductCard() {
  return (
    <div class={styles.container}>
        <Product className={styles.product}/>
    </div>
  )
}

如何使用给定 ProductCard 的 className 扩展我的 Product 组件中的 p 标签样式

标签： cssreactjsnext.jscss-modules

Answer 1

import styles from "./Product.module.css"
function Product({className=""}) {
  const classes = {
      'product': `${styles.product}`
  }
  return (
     <div class={`${styles.container} ${classes[className]}`}>
        <p className={styles.title}>product</p>
     </div>
  )
}

import styles from "./ProductCard.module.css"
function ProductCard() {
  return (
      <div class={styles.container}>
          <Product className='product' />
      </div>
  )
}