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

Question

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

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

Answer 1

您应该能够禁用指针事件，这将停止默认的悬停效果(请注意，这也将停止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>

​