Name: React CSS in JavaScript with Radium
Uploaded: 2015-03-23T16:15:33-05:00
Description: Radium is a set of mixins for managing styles in React components, allowing you to use CSS features that aren’t possible with inline styles.

Radium is a set of mixins for managing styles in React components, allowing you to use CSS features that aren’t possible with inline styles.

https://app.egghead.io/api/v1/lessons/react-react-css-in-javascript-with-radium/subtitles

React CSS in JavaScript with Radium

[00:00] Hi guys. In this video, we are going to take a look at Radium, which is a really interesting library of mixins for React that allows us to write our CSS in pure Javascript. I'm going to get a really simple component here that just outputs a button with the innerHTML of "Hello."

[00:17] I'm going to bring in our first mixin from Radium. It's going to be Radium.StyleResolverMixin. Let's go ahead and output our component. It's our app. We'll put that in the document.body. Up here, inside of our render method...There's our button, nothing special.

[00:37] Inside of our render method, I'm going to create a variable called "styles." It's going to be an object, just like normal CSS in React. I'm just going to paste in some style here. Again, no big deal. We are going to assign our style attribute to this.buildStyles. We're going to pass that our styles variable. We'll load that up in the browser.

[01:00] You can see we've got our style, again, very similar to what you're probably used to with React. Getting to some of the interesting stuff here, we're going to create a key in our styles called "modifiers." It's going to be an array. We're going to have an object here with a key of kind. That's going to be like our attribute on our component. 

[01:23] We're going to have another object here. Each of these keys is going to be the value that we can pass in for our attribute, and then we're just going to create a new style. Here, I'm going to say "background." If it's primary, it's going to be green. I'll create one more. I'm going to call this one "warning." We'll make that background red.

[01:44] Now we can come down to our component. We can pass in the kind attribute and then pass in the kind value. We're going to say, "warning." Now our button is red. If we say "primary," now our button is green. That's how modifiers work from the StyleResolverMixin.

[02:06] The next thing we're going to take a look at is another mixin available in the Radium library. This one is called "BrowserStateMixin." This is going to allow us to set various states to our CSS right here in JavaScript. We're just going to create a key called "states." It's going to be an array. 

[02:29] Each of those elements is going to be an object. The key is going to be our state. In this case, I'm saying, "hover." I'm passing in my new style. I'm going to say the background is black. Create one more of these for focus.

[02:43] Here, I'm going to say my background is pink. I'm going to get rid of the ugly outline. Since our background is pink, we're going to make our color black. The way we get to this is by using the JSX spread operator. We can just pass it in so that our button will inherit these properties. this.getBrowserStateEvents is the method from our mixin.

[03:16] We'll go ahead and save that, load it up over here. Now, when we hover, we've got our black background. When we select it, focus it, we've got our pink background with our black text. That is a quick look at Radium.

React CSS in JavaScript with Radium

Share this video with your friends