Can't declare keyframe within withStyles HOC (container.addRule(...).addRule is not a function)

The issue appears to be resolved by not nesting @keyframes definitions. The hint was in the second application of the addRule function in the error: container.addRule(...).addRule is not a function.

Solution

Try moving your keyframe animations to the root level. So from this

const styles = theme => ({
  container: {
    '@keyframes enter': {
      '0%': {
        transform: 'scale(0)',
        opacity: 0.1,
      },
      '100%': {
        transform: 'scale(1)',
        opacity: 0.3,
      },
    }
  }
}

to this

const styles = theme => ({
  '@keyframes enter': {
      '0%': {
          transform: 'scale(0)',
          opacity: 0.1,
      },
      '100%': {
          transform: 'scale(1)',
          opacity: 0.3,
      },
  }
}

Hope that helps.

---

Interesting side note: nesting the animation another level removes the error, but does not instantiate the CSS animation.