How to add ripple effect on click of Card in material-ui

I noticed that TouchRipple has been moved out of the internal directory. It's now available in the ButtonBase folder.

Here is how I was able to add ripple effect by using the ButtonBase component -

Basically, you wrap your component, let's say <Card> inside the <ButtonBase> like so, and the ButtonBase takes care of the TouchRipple setting up for you -

<ButtonBase>
     <Card>
         ....
     </Card>
</ButtonBase>

Here is a Codesandbox link to working demo. I know this is not the best way. You could directly use the TouchRipple/Ripple component, but I found this way to be very easy to use.

Hope this helps.

I can see this question was not answered, so I'll provide an up-to-date solution (writing this as material-ui is v. 0.18.7 (stable):

You need to import the ripple higher-order comp. (HOC) as:

import TouchRipple from '@material-ui/core/ButtonBase/TouchRipple';

Then you can wrap any component of you choice with TouchRipple, like:

<TouchRipple>
   <div>
     MY RIPPLING DIV
   </div>
</TouchRipple>

Or, if you need a CSS class-based apporach, you can use materialize lib -> https://react-materialize.github.io/#/

In that case, it's as simple as adding a value to waves prop on a material-ui Button, like:

<Button waves='light'>EDIT ME<Icon left>save</Icon></Button>