0件ヒットしました

    【styled-components】keyframesにpropsを渡す方法

    Reactstyled-components

    目次

    React で styled-components を使っている時に、keyframes に props を渡す方法です。 よく忘れるので忘備録代わりにメモしておきます ✍️

    やりたいこと (これは動きません)

    const rotate = keyframes`
  0% {
    transform: rotate(0deg);
  }
  100% {
    // ここでpropsを使いたい... //
    transform: rotate(${props.rotation});
  }
`

export const Wrapper = styled.div`
  &.rotate {
    animation: ${rotate} 0.4s ease forwards;
  }
`

    解決策: keyframes を返す関数を定義する

    const rotate = props => {
  return keyframes`
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(${props.rotation});
    }
  `
}

    Wrapper 内で props を渡して呼び出し

    export const Wrapper = styled.div`
  &.rotate {
    animation: ${props => rotate(props.deg)} 0.4s ease forwards;
  }
`

    DONE🎉

    関連記事最新記事
    2019-08-11Sass(SCSS)の関数をstyled-componentsでも使いたい
    2019-10-25Gatsby製ブログでサイト内検索を実装しました
    2019-09-12Gatsby + Markdownでブログを作り直しました
    2019-07-04GatsbyJS + Contentful + Netlifyでブログ作ってみた