how to disable default hover and click effects of material-ui cardActionArea

Question

as you can see in here https://material-ui.com/components/cards 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?

const useStyles = makeStyles({
    root: {
        width: 345,
        margin: 5,
        '&:hover': {
            transform: 'translateY(-5px) !important'
        },
    },
    media: {
        maxHeight: 350,
        marginBottom:-3
    },
});

Answer 1

You should be able to disable the pointer-events, which will stop the default hover effects (note this will also stop the onClick events as well, as it will disable all mouse events):

const useStyles = makeStyles({
    root: {
        width: 345,
        margin: 5,
        '&:hover': {
            pointerEvents: 'none',
            transform: 'translateY(-5px) !important'
        },
    },
    media: {
        maxHeight: 350,
        marginBottom:-3
    },
});

Answer 2

 const { Card, CardActionArea, CardActions, CardContent, CardMedia, Button, Typography, makeStyles } = MaterialUI; const useStyles = makeStyles((theme) => ({ root: { maxWidth: 345, transition: theme.transitions.create("transform", { easing: theme.transitions.easing.easeInOut, duration: theme.transitions.duration.standard }), "&:hover": { transform: "translateY(-5px)" } }, focus: { "&&&": { opacity: 0 } }, ripple: { color: "red" } })); function ImgMediaCard() { const classes = useStyles(); return ( <Card className={classes.root}> <CardActionArea classes={{ focusHighlight: classes.focus }} TouchRippleProps={{ className: classes.ripple }} > <CardMedia component="img" alt="Contemplative Reptile" height="140" image="https://material-ui.com/static/images/cards/contemplative-reptile.jpg" title="Contemplative Reptile" /> <CardContent> <Typography gutterBottom variant="h5" component="h2"> Lizard </Typography> <Typography variant="body2" color="textSecondary" component="p"> Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica </Typography> </CardContent> </CardActionArea> <CardActions> <Button size="small" color="primary"> Share </Button> <Button size="small" color="primary"> Learn More </Button> </CardActions> </Card> ); } ReactDOM.render(<ImgMediaCard />, document.getElementById('root'))

 <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <div id="root"></div>