React, MUI, and Keyframes
One day at work I needed to animate a button so that it shook horizontally when the user clicked it if it was disabled. We rarely do animations, so we generally implement these animations in CSS rather than using a library to accomplish it. That said, we do use React and MUI. However, MUI doesn't have a shake animation, so, I had to implement it myself. To do so, I used react state, keyframes, and the sx prop in MUI. Let's look at an example starting place. type MyButtonProps = { disabled ?: boolean ; }; const sxStyles = { button : { marginTop : 1 , padding : 1 , } }; export const MyButton = ({ disabled } : MyButtonProps ) => { const handleClick = () => console . log ( "You did it!" ); return ( < Button disabled = { disabled } onClick = { handleClick } sx = { sxStyles . button } > Click it! </ Button > ); }; Here we have a s