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

Posted 2023-02-19

【中文标题】如何在 Next.js 中将 CSS 模块中的 CSS 作为 prop 传递

【英文标题】：How to pass CSS from CSS module as prop in Next.js

【发布时间】：2022-01-22 20:36:05

【问题描述】：

我正在尝试在名为 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）。

【参考方案1】：

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

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

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

【讨论】：

我不想在全球范围内应用它，因为我在主页的其他部分使用了相同的卡片。我不希望这些部分受到它的影响

它应该只影响Team 组件中的Cards，因为有额外的范围.image 选择器。