按钮的悬停过渡效果

Question

I try to add a one-second transition from the normal color scheme to the hovering color for the Button element in Material UI. I use the method transitions.create(props, options) talked here in this article: https://medium.com/@octaviocoria/custom-css-transitions-with-react-material-ui-5d41cb2e7c5 . Actually the transition can work, but the hovering color will also appear immediately on the button as long as the mouse hovers on it. How can I stop the color change immediately but wait for the transition to make it change.

Related code:

function Mbutton({ classes }) {
  return (
    <Button variant="outlined" className={classes.cart} disableRipple>
      Add to Cart
    </Button>
  );
}

const styles = theme => ({
  cart: {
    padding: "6px 16px",
    borderRadius: 0,
    border: "2px solid #000",
    "&:hover": {
      transition: theme.transitions.create(["backgroundColor", "color"], {
        duration: 1000
      }),
      backgroundColor: "#000",
      color: "#fff"
    }
  }
});

Also can check it on Code Sandbox: https://codesandbox.io/s/mbutton-fogco

Thanks.

Answer 1

Write it like you do in plain CSS

const styles = theme => ({
    cart: {
        padding: "6px 16px",
        borderRadius: 0,
        border: "2px solid #000",
        backgroundColor: "white",
        color: "black",
        transition: "background 1s, color 1s",
        "&:hover": {
        backgroundColor: "#000",
        color: "#fff"
        }
    }
});

CodeSandBox

The theme passed is unnecessary, you should only use that if you want to use the transition styles available on the default Material-UI theme object, which you didn't need it here.