Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 828 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Styling a React button component with Radium

1:29 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

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 0:07] 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.

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.

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.

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.

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.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?