Key Frames with ReactJS Inline Styles

Question

I am trying to set pulsed animation keyframes in ReactJS. I tried to just set the keyframes inside the inline style, but this does not work.

My code

const NewRelpyheButton = ({style = {}, open, handleOPenSettings}) => { var bar = { color: '#000', padding: '1em 0', fontSize: '20px', textAlign: 'center', cursor: 'pointer', position: 'fixed', bottom: '0', width: '100%', zIndex: '10', animation: 'pulse 1.2s ease-in-out', animationIterationCount: 'infinite', } Object.assign(style, {}); let openModal; if (open) { openModal = <Modal><NewRelpyhe/></Modal> } return ( <div> {openModal} <Bar color='purple' style={bar} onClick={handleOpenSettings}> create a new relphye site </Bar></div> ) } 

I am trying to imitate this in css:

 .element { width: 100%; height: 100%; animation: pulse 5s infinite; } @keyframes pulse { 0% { background-color: #001F3F; } 100% { background-color: #FF4136; } } html, body { height: 100%; } 

Answer 1

If you want all of your styles to be tightly coupled with your components, let Styled Components go. They have an assistant for key personnel.

eg.

 import styled, { keyframes } from 'styled-components' const pulse = keyframes` from { background-color: #001F3F; } to { background-color: #FF4136; } ` const Bar = styled.div` color: #000; padding: 1em 0; font-size: 20px, text-align: center; cursor: pointer; position: fixed; bottom: '0', width: 100%; z-index: 10; animation: ${pulse} 1.2s ease-in-out; animation-iteration-count: infinite; ` 

Then use like this:

 <Bar>I pulse</Bar>