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

Question

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).

juliomalves · Accepted Answer · 2021-12-21 18:54:32Z

1

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

answered Dec 21, 2021 at 18:54

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rishabh Raghwendra Over a year ago

I don't want to apply it globaly because I have used the same cards on other sections of the home page . I don't want those sections to get effected by it

juliomalves Over a year ago

It should only affect the Cards in the Team component because of the additional scoped .image selector.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related