How to extend css modules in next js? - css

Question

I am new to nextjs and I have a question about CSS modules
I have a Product component that looks like this
import styles from "./Product.module.css"
function Product({className=""}) {
return (
<div class={`${styles.container} ${className}`}>
<p className={styles.title}>product</p>
</div>
)
}
Then I want to create another component that is called ProductCard which uses the Product component but needs to extend the p tag inside it
import styles from "./ProductCard.module.css"
function ProductCard() {
return (
<div class={styles.container}>
<Product className={styles.product}/>
</div>
)
}
How can I extend the p tag style in my Product component with a className given ProductCard

Answer 1

You need to add an additional custom prop and pass it to the p element. Using an object will allow you to pass any prop to the p element. See React's docs on props in JSX, MDN spread syntax, and nullish coalescing operator.
function Product({ className, titleProps, ...rest }) {
return (
<div className={`${styles.container} ${className ?? ''}`} {...rest}>
<p {...titleProps}>product</p>
</div>
);
}
function ProductCard() {
return (
<div className={styles.container}>
<Product
className={styles.product}
titleProps={{ className: styles.title }}
/>
</div>
);
}

Answer 2

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