Sparkle CSS animation with only in-line styling in React

sparkle.js

const Sparkle = props => {
	const style = {
      		animation: `${props.duration} linear ${props.delay} infinite sparkle`,
    		backgroundColor: 'GhostWhite',
  		borderRadius: '50%',
      		boxShadow: `0 0 ${props.blur} ${props.spread} rgba(255, 255, 224, 0.5)`, 
  		height: props.height,
  		left: props.left,
  		position: 'relative',
  		top: props.top,
  		width: props.width,
    }
    let styleSheet = document.styleSheets[0]
    
    const keyframes = `@-webkit-keyframes sparkle {
        		0% { opacity: 0; }
  		25% { opacity: ${props.opacity}; }
  		75% { opacity: 0.9; }
  		100% { opacity: 0; }
      }`
    styleSheet.insertRule(keyframes, styleSheet.cssRules.length)
  
    return <div style={style} />
}

const Lamp = props => {
	const style = {
		width: '100px',
		height: '100px',
		backgroundColor: 'purple',
		borderRadius: '50px',
	}
    const sparkles = []
    
    for (let i = 0; i < 25; i++) {
      	const left = Math.floor(Math.random() * 99)
  		const top = Math.floor(Math.random() * 99)
		const size = Math.floor(Math.random() * 2) + 2
        		const opacity = Math.random() + 0.1
      		const duration = Math.floor(Math.random() * 700) + 300
       		const delay = Math.floor(Math.random() * 800) + 200
    		sparkles.push(<Sparkle 
                        height={(size) + 'px'} 
                        width={(size) + 'px'} 
                        left={(left) + '%'} 
                        top={(top) + '%'} 
                        blur={(size * 4) + 'px'} 
                        spread={(size) + 'px'} 
                        opacity={opacity} 
                        duration={(duration) + 'ms'} 
                        delay={(delay) + 'ms'} />)
    }
	return <div style={style}>{sparkles}</div>
}
export default Lamp