Here at Bloomfire, we’re loving building new components with React. We’re even going all in with using ES6 modules and inline styles. (‘Inline styles?!’ I hear you say? Don’t knock it ’til you’ve tried it.)
There’s a lot of cool stuff we can do with CSS that we can’t do with inline styles, though; and that’s where Radium comes in. Radium not only provides a handy way to style :hover
, :focus
, and :active
states, but it also deftly handles media queries. If you’re using inline styles in React and not using Radium, you should. I’ll give you a minute to go look it over – here’s the link again.
Back? Okay.
We create a style object in each of our React components, which we then reference in the JSX below. Here’s a super-stripped-down example:
// [myAwesomeButton.js]