transitionDelay on makeStayles on material-UI

Question

const useStyles = makeStyles({
  buttonStyle: {
    background: "red",

    "&:hover": {
      transitionDelay: '1',
      transform: "scale(1.1)",
      background: "red",
    },
  },
});

how can i implemated i transitionDelay on makeStyles? This did not work.

Answer 1

You're missing a few things here:

1. You need a transitionProperty to which the transitionDelay will apply to. In your case, it is the transform CSS property.
2. Your transitionDelay needs to include the units of the delay e.g. 1s or 1000ms.
3. If you want to apply your transitions on the button when it is not on a hover state, then apply the styling to the button instead of the &:hover.

This is what it will look like:

const useStyles = makeStyles({
  buttonStyle: {
    background: "red",
    transitionProperty: "transform",
    transitionDelay: "1s",
    
    "&:hover": {
      transform: "scale(1.1)",
      background: "red",
    },
  },
});