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.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo utilizar el estilo de seudo-elementos CSS dentro de React JSX para pasar variables?

¿Cómo puedo utilizar el estilo de seudo-elementos CSS dentro de React JSX para pasar variables?

25 Jul, 2023 Programación

El siguiente código es para agregar una placa a una tarjeta.

Código CSS funcional:

.card::before {
position: absolute;
content: "";
background: #283593;
height: 18px;
width: 18px;
top: 2.5rem;
right: -0.7rem;
z-index: -1;
transform: rotate(45deg);
}

.card::after {
position: absolute;
content: "Sample Name";
top: 11px;
right: -14px;
padding: 0.5rem;
width: 11rem;
background: #3949ab;
color: white;
text-align: center;
box-shadow: 4px 4px 15px rgba(26, 35, 126, 0.2);
}

Quiero pasar variables en forma de JSX dentro del estilo CSS como se muestra a continuación:

<

div
className="card"
styleBefore={{
position: "absolute",
content: "",
background: "#283593",
height: "18px",
width: "18px",
top: "2.5rem",
right: "-0.7rem",
zIndex: "-1",
transform: "rotate(45deg)",
}}
styleAfter={{
position: "absolute",
content: - ${this.props.name},
top: "11px",
right: "-14px",
padding: "0.5rem",
width: ${this.props.name.length}rem,
background: "#3949ab",
color: "white",
textAlign: "center",
boxShadow: "4px 4px 15px rgba(26, 35, 126, 0.2)",
}}
>

En lugar de “styleBefore” y “styleAfter” (campos inválidos) que utilicé anteriormente, ¿cómo puedo replicar “.card::before” y “.card::after” del CSS en JSX?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para replicar .card::before y .card::after en JSX, puedes utilizar los pseudo-elementos ::before y ::after directamente en CSS dentro del atributo style del elemento JSX. Al igual que en el código CSS, puedes agregar pseudo-elementos utilizando los selectores ::before y ::after en JSX. Aquí tienes un ejemplo:

    <div classname="card" style="{{" position:="" 'relative',="" ...="" }}="">
  <div classname="card__content">
    {this.props.name}
  </div>
</div>

<style>
  .card::before {
    position: absolute;
    content: "";
    background: #283593;
    height: 18px;
    width: 18px;
    top: 2.5rem;
    right: -0.7rem;
    z-index: -1;
    transform: rotate(45deg);
  }

  .card::after {
    position: absolute;
    content: "Sample Name";
    top: 11px;
    right: -14px;
    padding: 0.5rem;
    width: 11rem;
    background: #3949ab;
    color: white;
    text-align: center;
    box-shadow: 4px 4px 15px rgba(26, 35, 126, 0.2);
  }
</style>

    Observa que el .card__content entre las etiquetas de apertura y cierre es donde puedes colocar el contenido que deseas mostrar dentro de la tarjeta. El atributo style dentro de la etiqueta de apertura es donde puedes agregar propiedades de estilo como position, content, background, height, width, top, right y z-index para replicar .card::before y .card::after del código CSS original.

Comments are closed.