MUI - How to animate Card depth on hover?

Question

I want to animate the depth of the whole Card when the mouse is over it. I try this (so-so I'm new in React) but I have no idea how to do it:

<Card 
  linkButton={true}
  href="/servicios/"
  onClick={Link.handleClick} zDepth={3}
  onMouseEnter={this.setState({zDepth={1}})}>
</Card>

Thanks in advance.

Answer 1

5 years later and there is still no correct answer, you do not have to set the component state when it hovers, just use the pseudo-class :hover:

<Card
  sx={{
    ':hover': {
      boxShadow: 20, // theme.shadows[20]
    },
  }}
>

If you want to use styled():

const options = {
  shouldForwardProp: (prop) => prop !== 'hoverShadow',
};
const StyledCard = styled(
  Card,
  options,
)(({ theme, hoverShadow = 1 }) => ({
  ':hover': {
    boxShadow: theme.shadows[hoverShadow],
  },
}));

<StyledCard hoverShadow={10}>
  <Content />
</StyledCard>

Live Demo