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

Question

我正在尝试将 CSS 应用于名为

Cards

的组件。我想在

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