es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo pasar CSS de un módulo CSS como prop en Next.js

26 Jul, 2023 Programación

Estoy tratando de aplicar CSS en un componente llamado “Cards”. Quiero aplicar el CSS en el div “#image_div”. Mi código es el siguiente:

“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="{&quot;XYZ&quot;}" 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"></image>
      </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>
  );
}

Pero cuando inspecciono el “#image_div”, el CSS no se aplica a él. ¿Qué estoy haciendo mal aquí? Quiero aplicar el CSS definido en “team.module.css” sin definir el mismo CSS en el archivo “Card.module.css” (que contiene CSS para “Cards.js”).

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que puede haber un error tipográfico en el archivo team.module.css. En lugar de .image #image_div, debería ser .image #image_div ya que image es una clase y #image_div es un ID.

    Además, en el archivo index.js, className en el componente Cards no debe asignarse a styles.image ya que ya está establecido en className={styles.image}, lo cual anula cualquier otro nombre de clase pasado a él.

    Entonces, el team.module.css corregido debería verse así:

    .grid_container{
    display: grid;
    grid-template-columns: repeat(3,auto);
}
.image #image_div{
    border-radius: 100%;
    margin: 30vh;
}

    Y el archivo index.js corregido debería verse así:

    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="{&quot;XYZ&quot;}" classname="{&quot;image&quot;}"></cards>
            </div>
        </div>
    );
}

    Ten en cuenta que ahora className está establecido como “image”, lo cual se aplicará al div externo del componente Cards.

    Con estos cambios, ahora el CSS definido en team.module.css debería aplicarse al #image_div en el componente Cards.

Comments are closed.