如何禁用默认 hover 和 material-ui cardActionArea 的点击效果

Question

正如你在这里看到的https://material-ui.com/components/cards卡片样本，里面有一张蜥蜴照片。 当您在 cardActionArea 上使用 hover 时，它会根据主题变暗（变亮），当您单击卡片时，图片将从鼠标指针周围开始变亮（变暗）。 现在我有两个问题：1-如何更改点击效果的颜色？ 例如，当用户单击照片时，我希望照片变为红色（更改色调） 2-我已经实现了自己的 hover 效果，当您使用 hover 时，卡将 Z34D1F91FB2E514B8576Z 向上一点点位代码。 如何禁用更改图片颜色的默认 hover 效果？

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

Answer 1

您应该能够禁用指针事件，这将停止默认的 hover 效果（注意这也会停止 onClick 事件，因为它会禁用所有鼠标事件）：

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>