useStyle makeStyle keyframes에다가 props 로 넘겨주는 법

material ui v4 에서는 keyframes 에 props 를 넘겨주면 애니메이션이 작동하지 않게 된다.

 

나는 꼭 넘겨주어야 할 일이 생겼기 때문에 정말 한참동안 찾은 방법이다.

나와 같이 헤매는 분들을 위해 공유한다.

 

const defaultProps: StylePropType = {
    selectedItem,
    rotate,
    nbTurn: 9,
};
  
  
const classes = useStyles(defaultProps)();

 

위와 같이 useStyle 인자에 props 를 넘겨준다.

그리고 뒤에 ( ) 를 붙여서 useStyle 의 결괏값(= makeStyle)을 바로 classes 변수에 넘겨주자.

 

 

 

 

 

import { makeStyles } from "@material-ui/core/styles";
import { StylePropType } from "./Types";

export const useStyles = (props: StylePropType) => {
  return makeStyles(() => ({
    "@keyframes ani": {
      from: {
        transform: `rotate(${props.rotate})`,
      },
      to: {
        transform: `rotate(calc(${props.nbTurn} * 360deg + (-45deg * ${props.selectedItem})))`,
      },
    },
    on: {
      animationName: "$ani",
      animationDuration: "4s",
      animationFillMode: "both",
      animationIterationCount: 1,
      transitionTimingFunction: "ease-in-out",
    },

 

원래 makeStyle 은 스타일 객체를 반환하는 훅이다. 

따라서 makeStyle(() => ({키: 값}) 와 같이 써도 된다.

이제 애니메이션에 props 를 써주니 잘 적용이 되는 모습이다.