CODEWITHSUNDEEP
javascriptcssreactjsnext.jscss-modules
Rishabh Raghwendra
Rishabh Raghwendra

Reputation: 320

How to pass CSS from CSS module as prop in Next.js

I am trying to apply CSS on a component called Cards. I want to apply the CSS on the #image_div div. My code is as follows:

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

But when I inspected the #image_div the CSS is not applied to it. What am I doing wrong here? I want to apply the CSS defined in the team.module.css without defining the same CSS in the Card.module.css file (which contains CSS for Cards.js).

Upvotes: 1

Views: 1523

Answers (1)

juliomalves
juliomalves

Reputation: 50228

Just like the class selectors, the #image_div selector also gets namespaced by CSS Modules.

You have to use :global() on the selector to switch to global scope and properly target #image_div.

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

Upvotes: 1

Related Questions