title: how to disable default hover and click effects of material-ui cardActionArea
body: <p>as you can see in here <a href="https://material-ui.com/components/cards" rel="nofollow noreferrer">https://material-ui.com/components/cards</a>
  the card sample with a lizard photo in it. as you hover over the cardActionArea it will get darker(lighter) based on the theme and when you click on the card the picture will get lighter(darker) starting from around the mouse pointer.
  now I have two questions :
  1- how can I change the color of the click effect ? for example I want the photo to get red (change hue ) when user clicks on it
  2- I have implemented my own hover effect that when you hover, the card will go up a little bit(codes below). how can I disable the default hover effect that changes the color of the picture ?</p>
  <pre><code>const useStyles = makeStyles({
      root: {
          width: 345,
          margin: 5,
          '&amp;:hover': {
              transform: 'translateY(-5px) !important'
          },
      },
      media: {
          maxHeight: 350,
          marginBottom:-3
      },
  });
  </code></pre>