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
:active. By using Radium to listen to mouse events we can restore
: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: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.