React의 UI 프레임워크로 유명한 Material-UI(v4)으로 CSS 애니메이션을 수행합니다.
withStyle 내에 클래스로 css transition 및 css animation을 정의할 수 있습니다.

css transition

참고: Custom CSS transitions with React Material UI

css transition을 정의하려면 theme.transitions.create를 사용하십시오.
첫 번째 인수는 변경되는 CSS 속성을 지정합니다. 두 번째 인수는 애니메이션 시간을 지정합니다.

RainbowButton.jsx

import React from 'react'
import { withStyles } from '@material-ui/core'
import Button from '@material-ui/core/Button'

const RainbowButton = withStyles(theme => ({
  root: {
    color: theme.palette.common.white,
    fontWeight: 'bold',
    textShadow: `2px 2px 4px ${theme.palette.common.black}`,
    fontSize: 32,
    background: 'linear-gradient(100deg, red, yellow, lightgreen, aqua, blue, pink, magenta)',
    filter: 'saturate(90%)',
    transition: theme.transitions.create(
      ['opacity'],
      { duration: theme.transitions.duration.complex }
    ),
    '&:hover': {
      opacity: 0.7,
    },
  },
}))(({classes, className, ...props}) => <Button className={[classes.root, className].join(' ')} {...props} />)

export default RainbowButton

마우스 오버하면 반투명하게 됩니다.

css animation

$アニメーション名에서 애니메이션 이름을 지정합니다.
MUI-v4 이전의 경우에는 $를 붙이지 않습니다.

New.jsx

import React from 'react'
import { withStyles } from '@material-ui/styles'
import { red } from '@material-ui/core/colors'

let New = ({children, classes}) => (
  <div className={classes.root}>
    <div className={classes.new}>New</div>
    {children}
  </div>
)

New = withStyles((theme) => ({
  root: {
    position: 'relative',
  },
  new: {
    position: 'absolute',
    top: -20,
    left: 0,
    color: red[500],
    fontSize: 24,
    fontWeight: 'bold',
    transform: 'rotateZ(15deg)',
    textShadow:
    `1px 1px 0.5px ${theme.palette.grey[300]},
    -1px 1px 0.5px ${theme.palette.grey[300]},
    1px -1px 0.5px ${theme.palette.grey[300]},
    -1px -1px 0.5px ${theme.palette.grey[300]}`,
    animation: '$newAnimation 1s ease infinite alternate',
  },
  '@keyframes newAnimation': {
    '0%': {transform: 'rotateZ(-15deg) scale(1.0)'},
    '100%': {transform: 'rotateZ(-15deg) scale(1.3)'},
  },
}))(New)

export default New

새로운 문자가 애니메이션됩니다.

withStyle에 props를 통해 매개 변수 전달

v4에서 props의 정보를 withStyle에서 참조할 수 있습니다.
다음과 같이 화살표 함수의 반환 형식으로 지정합니다.opacity: props => props.opacity || 0.8,
RainbowButton2.jsx

import React from 'react'
import { withStyles } from '@material-ui/core'
import Button from '@material-ui/core/Button'

const RainbowButton = withStyles(theme => ({
  root: {
    color: theme.palette.common.white,
    fontWeight: 'bold',
    textShadow: `2px 2px 4px ${theme.palette.common.black}`,
    fontSize: 32,
    background: 'linear-gradient(100deg, red, yellow, lightgreen, aqua, blue, pink, magenta)',
    filter: 'saturate(90%)',
    transition: theme.transitions.create(
      ['opacity'],
      { duration: theme.transitions.duration.complex }
    ),
    '&:hover': {
      opacity: props => props.opacity || 0.8,
    },
  },
}))(({classes, className, ...props}) => <Button className={[classes.root, className].join(' ')} {...props} />)

export default RainbowButton