Instalé vanilla-tilt.js para reaccionar y ya obtuve mi propio elemento de tarjeta con estilo, pero agrega su propio estilo, como radio de borde, margen ...
¿Cómo lo prevengo?
<Tilt options={{ scale: 2 }}> <div className="card" > <div className="pt-3"> <img src={coin.image} style={{width:'10vh'}} class="card-img-top" alt="..."></img> </div> <div className="card-body text-center"> <h4>{coin.name}</h4> <div className=" "> <h5>${coin.current_price.toFixed(2)}</h5> <span className="text-success">({coin.price_change_percentage_24h.toFixed(2)}%)</span> </div> </div> </div> </Tilt>Css que viene con tilt-js
element.style { width: 300px; padding: 30px; margin: 10px; background: rgb(255, 255, 255); border-radius: 4px; color: rgb(54, 73, 98); font-size: 16px; line-height: 1.6; box-shadow: rgb(20 26 40 / 20%) 0px 7px 42px; will-change: transform; }La biblioteca react-vanilla-tilt usa esos estilos para el estilo predeterminado y para controlar las transformaciones en el div para que los efectos funcionen. Mirando la fuente, sus opciones son definir los estilos en el componente o usar una identificación y CSS con !important para anular los estilos predeterminados.
style en el componente Tilt . El componente Tilt establece su estilo directamente en el componente para que pueda hacer lo mismo con sus estilos de la siguiente manera:
<Tilt options={{ scale: 2 }} style={{ width: 500, backgroundColor: "#000", }} > /** Tilt contents */ </Tilt>Tilt , que funciona porque pasa todas las propiedades al div que crea, y agregue estilos. Los estilos que desea anular, como width o color de backgroundColor , deberán tener !important para anular el estilo predeterminado. <Tilt id="card" options={{ scale: 2 }} > /** Tilt contents */ </Tilt> #card { width: 500px !important; background-color: #000 !important; }Esto funcionó para mí en next.js:
<Tilt className={styles.tilt} style={{}}> <MyCardComponent /> <Tilt>En mi CSS:
.tilt { box-shadow: 0 0px 0px rgba(0,0,0,0) !important; }Esto me dejó solo con el css que implementó la funcionalidad de inclinación, y dejó el resto de mis estilos de css originales solo para mi tarjeta.