问题描述
我不确定问题是什么,因为我已经做了很多次没有问题,所以我想我搞砸了。我将展示 Product.js 组件和模块文件,如果还有什么我遗漏的地方,请告诉我(例如,也没有 next.config.js 文件)。
提前致谢!
Product.js
import { Card } from '@material-ui/core'
import styles from '../styles/Products.module.scss'
export default function Product({ product }) {
console.log(product)
return(
<Card className="product">
<img src={product.main_image} />
{product.name && product.name}
</Card>
)
}
Products.module.scss 文件
.product {
max-width: 300px;
& img {
width: 100%;
}
}
解决方法
在使用 CSS 模块时,您应该将您的 className
对象传递给 styles
,并访问所需的类:
import { Card } from '@material-ui/core'
import styles from '../styles/Products.module.scss'
export default function Product({ product }) {
console.log(product)
return(
<Card className={styles.product}>
<img src={product.main_image} />
{product.name && product.name}
</Card>
)
}
这是因为 CSS Module 会生成一个唯一的类名。它的类名不会是 product
,而是类似于 [filename]\_[classname]\_\_[hash]
(带有唯一哈希)以避免名称冲突。