I am having trouble applying CSS to a component called Cards. Specifically, I want to style the #image_div div. Below is my code snippet:
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>
);
}
Despite defining CSS in team.module.css, it seems that the styling is not being applied to the #image_div. What could be causing this issue? I would like the CSS from team.module.css to be applied without duplicating it in the Card.module.css file which pertains to Cards.js.