I have installed vanilla-tilt.js for react and I already got my own styled card item yet it adds its own styling such as border-radius,margin...
How do i prevent it ?
<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 that comes with 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;
}
The react-vanilla-tilt library uses those styles for default styling and for controlling the transforms on the div to make the effects work. Looking at the source your options are defining the styles on the component or using an id and CSS with !important to override default styles.
style property on the Tilt component.The Tilt component sets its style directly on the component so you can do the same with your styles like so:
<Tilt
options={{ scale: 2 }}
style={{
width: 500,
backgroundColor: "#000",
}}
>
/** Tilt contents */
</Tilt>
Tilt component, which works because it passes all properties to the div it creates, and add styles. The styles that you want to override, like width or backgroundColor, will need to have !important in order to override the default style.<Tilt
id="card"
options={{ scale: 2 }}
>
/** Tilt contents */
</Tilt>
#card {
width: 500px !important;
background-color: #000 !important;
}
This worked for me in next.js:
<Tilt className={styles.tilt} style={{}}>
<MyCardComponent />
<Tilt>
In my css:
.tilt {
box-shadow: 0 0px 0px rgba(0,0,0,0) !important;
}
This left me with just the css that implemented the tilt functionality, and left the rest of my original css stylings for my card alone.