Styling a React button component with Radium

Phil Holden
InstructorPhil Holden
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

React's inline styles allow components to stand on their own by not requiring any external CSS. However HTML's style attributes don't support pseudo selectors like :hover and :active. By using Radium to listen to mouse events we can restore :hover and :active selectors to inline styles.

[00:00] I'm going to get hold of React in Radium. Now I'm going to create a root element for React to render into. I'm going to set JS bin into [inaudible] mode. This is going to give me ES 6 and JS X. I'm going to need render from React and to get hold of that root element I created.

[00:22] I'm going to create a button component. I'm using an arrow function to do that. Let's try rendering that into the root element that we created early. Let's use destructuring to create more space. I'm going to add a style property to my button and create a style object to pass into this.

[00:42] This is very similar to CSS except where you'd expect to have a dash in CSS you need to use CamelCase because it's JavaScript plain objects. You need to wrap your colors and string values in quotes.

[00:55] For simple heights and widths, you can use plain numbers, and React will add in a px for you. But if you've got a complex thing like this padding where I've got two values, I need to use px there.

[01:09] One of the problems with in-line styles is that we can't use pseudo selectors like active and hover. To get round this, we're going to wrap our component in Radium. Behind the scenes, Radium listens to mouse clicks, mouse in, and mouse out. Then it triggers the appropriate styles that we nest within our style object. Now we can hover our button.

~ 48 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today