Sometimes, we want to add ripple effect when clicking a card in Material UI and JavaScript.
In this article, we’ll look at how to add ripple effect when clicking a card in Material UI and JavaScript.
How to add ripple effect when clicking a card in Material UI and JavaScript?
To add ripple effect when clicking a card in Material UI and JavaScript, we can add a card with the Card component.
For instance, we write:
import React from "react";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";
export default function App() {
return (
<div>
<Card>
<CardActionArea>
<CardContent>hello world</CardContent>
</CardActionArea>
</Card>
</div>
);
}
We add the Card, CardActionArea and CardContent components to add a card onto the page.
As a result, when we hover over the card, we should see the ripple effect displaying.
Conclusion
To add ripple effect when clicking a card in Material UI and JavaScript, we can add a card with the Card component.
