0

I'm trying to make some element blink in css, under React/material-ui, using withStyle.

The syntax from this post looks nice: https://stackoverflow.com/a/48320520/9316077

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

I simply tried the following:

    '@keyframes blinker': {
      '50%': {
        opacity: 0,
      },
    },

    '& .blink': {
      animation: '$blinker 1s step-start infinite',
    },

Adding the $ before blinkerbased on this issue: https://github.com/mui-org/material-ui/issues/13793

But this crashes my webpage. Any idea? Thanks!

Will59
  • 1,430
  • 1
  • 16
  • 37

1 Answers1

1

Keyframes name is generated since JSS core v10 so depending on which version you are using you need to use $ when you are referencing a scoped name or without when name/id is global.

Oleg Isonen
  • 1,463
  • 10
  • 10
  • Thanks for your feedback. I see in my npm package-lock that I have jss version 10.4.0, so this should be ok. Does my syntax look ok? I am not sure about the `50%` part.... – Will59 Sep 01 '20 at 06:00