Expand bottom border on hover in React.js using Material ui library

Question

My question is like this question, Hover effect : expand bottom border

how can i achieve the same effect in React using makeStyles of Material ui. I am trying like this

const useSTyles = makeStyles((theme) => ({
 //other code
  remove: {
    textTransform: "none",
    fontSize: "0.75rem",
    "&:after": {
      transition: theme.transitions.create(["transform"], {
        duration: theme.transitions.duration.standard,
      }),
      transform: "scale(0)",
      borderBottom: "1px solid #dbdada",
      transformOrigin: "0% 50%",
    },
    "&:hover": {
      background: "none",
      "&:after": {
        transform: "scale(1)",
      },
    },
  },

 // other code
}));

This is the component on which i am trying to create border bottom animation:

  <Button
      classes={{root:classes.remove}}
      onClick={() => handleClickRemove(item)}
    >
      Remove
    </Button>

Answer 1

To animate Button bottom border in Material-ui you could create a transition for border-bottom. Then inject css into Button root class using classes prop.

Here a working example.

Basically, in Button classes prop, inject remove css into root like:

<Button
    variant="contained"
    classes={{
      root: classes.remove
    }}
  >
    Remove
  </Button>

Then on useStyles:

 const useStyles = makeStyles((theme) => ({
 ...
  remove: {
    textTransform: "none",
    fontSize: "0.75rem",
    borderBottom: "2px solid transparent",
    transition: theme.transitions.create(["border-bottom"], {
      duration: 1000
    }),
    "&:hover": {
       textDecoration: "none",
       borderBottom: "2px solid black"
    }
  }
 ...
}));

Note: when you create the transition for border-bottom you could change the easing like the duration (at default, easing is easeInOut).