如何在 Next.js 中将 CSS 模块中的 CSS 作为 prop 传递

Question

我正在尝试在名为 Cards 的组件上应用 CSS。我想在#image_div div 上应用 CSS。我的代码如下：

team.module.css:

.grid_container{
    display: grid;
    grid-template-columns: repeat(3,auto);
}
.image #image_div{
   border-radius:100%;
    margin: 30vh;
} 

index.js:

import Image from "next/image";
import Div from "../../components/Div";
import Cards from "../../components/Cards";
import styles from "../../styles/team.module.css";
import xyz from "../../public/xyz.jpeg"

export default function Team(){
    return (
        <Div>
            <div className={`${styles.grid_container}`}>
                <Cards url={xyz} title={"XYZ"} className={styles.image}></Cards>
            </div>
        </Div>
    );
}

Cards.js:

import Image from "next/image";
import { Card } from "react-bootstrap";
import styles from "../styles/components/Card.module.css";

export default function Cards({title,url,width,height,alt,description,className}) {
  return (
    <Card className={`card col-xs-12 col-sm-4 ${styles.Card} ${className?className:null}`}>
      <div className="d-flex justify-content-center" id="image_div">
            <Image
            variant="top"
            src={url}
            width={width}
            height={height}
            alt={alt}
            className="img-card"
            />
      </div>
      <Card.Body className="card-content">
        <Card.Title className="card-title text-center">{title}</Card.Title>
        <Card.Text className="text-center">{description}</Card.Text>
      </Card.Body>
    </Card>
  );
}

但是当我检查#image_div 时，CSS 并未应用于它。我在这里做错了什么？我想应用在team.module.css 中定义的CSS，而不在Card.module.css 文件中定义相同的CSS（其中包含Cards.js 的CSS）。

Answer 1

就像类选择器一样，#image_div 选择器也被 CSS 模块命名。

您必须在选择器上使用:global() 才能切换到全局范围并正确定位#image_div。

.image :global(#image_div) {
    border-radius:100%;
    margin: 30vh;
}