Skip to content

Instantly share code, notes, and snippets.

@yamadayuki
Created June 19, 2016 14:58
Show Gist options
  • Save yamadayuki/f1ea9ccacad7f1c140457b5877fb54cc to your computer and use it in GitHub Desktop.
Save yamadayuki/f1ea9ccacad7f1c140457b5877fb54cc to your computer and use it in GitHub Desktop.
Use keyframes property with React using inline style
const injectStyle = (style) => {
const styleElement = document.createElement('style');
let styleSheet = null;
document.head.appendChild(styleElement);
styleSheet = styleElement.sheet;
styleSheet.insertRule(style, styleSheet.cssRules.length);
};
export default injectStyle;
import React from 'react';
import injectStyle from './path/to/injectStyle';
export default class SampleComponent extends React.Component {
constructor(props) {
super(props);
const keyframesStyle = `
@-webkit-keyframes pulse {
0% { background-color: #fecd6d; }
25% { background-color: #ef7b88; }
50% { background-color: #acdacf; }
75% { background-color: #87c3db; }
100% { background-color: #fecd6d; }
}
`;
injectStyle(keyframesStyle);
this.state.style = {
container: {
WebkitAnimation: 'pulse 10s linear infinite',
},
title: {
fontSize: '2rem',
},
}
}
render() {
const { style } = this.state;
return (
<div style={style.container}>
<h3 style={style.title}>Hello world using React!</h3>
</div>
);
}
}
@leoskyrocker
Copy link

This has a fundamental difference from using inline styles, i.e. inline styles doesn't pollute the global styles. With the injection here, it injects to the global scope which I would say defeats the purpose of inline styles.

@captncraig
Copy link

I like this a lot. @LeoI11 is right, this does pollute the global styles, but I think this solves a different problem: for when you want styles distributed in the same file as the component itself. You could potentially make it pretty safe by prefixing selectors with the component name, but you would need to be very careful to make that perfectly safe.

@tleite
Copy link

tleite commented Feb 10, 2020

This is the stuff that makes me hate React

@Vashu473
Copy link

Vashu473 commented Aug 9, 2022

Thanks it works , just we have to care about our className and Id to implement css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment