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 1071 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Styling React Components With Aphrodite

2:29 React lesson by

Aphrodite is a library styling React components.

You get all the benefits of inline styles (encapsulation, no build step, no CSS cascade, building up styling with JavaScript instead of a preprocessor language) with all the benefits of CSS (animations and transitions, pseudo-classes, media queries).

Learn how to use Aphrodite to style reusable React components.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Aphrodite is a library styling React components.

You get all the benefits of inline styles (encapsulation, no build step, no CSS cascade, building up styling with JavaScript instead of a preprocessor language) with all the benefits of CSS (animations and transitions, pseudo-classes, media queries).

Learn how to use Aphrodite to style reusable React components.

Avatar
Dean

cool vid - thanks.
How do you deal with DRY concepts? For instance, what if I need dynamic color names, because I might be skinning depending on branding. Or perhaps I want my font to be able to change? If I have to go into n number components and manually change something, seems burdensome. How do you work global styles into this?

In reply to egghead.io
Avatar
Jamison

The styles are built out of JS objects, so you can use all the techniques you already know from JS for DRYing things out. Put shared styles in a module, import that, and use it inside your components.
Global styles can work well for "style guide" kinds of things, where you want a base style for each kind of element, and Aphrodite works well combined with this approach.

In reply to Dean
Avatar
Hozefa

In the demo, noticed that Aphrodite added !important to every style. Doesn't this kinda break the whole idea of cascading rules?

In reply to egghead.io
Avatar
Hozefa

Actually found the docs and there is a way to disable !important

In reply to Hozefa
Avatar
Jamison

There is indeed a way to disable the !important, but one underlying philosophy of CSS-in-JS is that the cascade is actually more harmful than helpful. It makes it hard to look at a piece of markup, look at your CSS, and figure out what rules will be applied to the markup. This makes it harder to refactor or remove CSS.

In reply to Hozefa

Here's a simple react button component that we can click on. It's pretty ugly. Let's add some inline styles by creating this style object, and then we'll pass it in as style on our button. Now it's prettier, and it still works the same. Also because we're defining inline styles, they come along for free when anyone uses this component.

Now let's add in Aphrodite by importing StyleSheet and css from the aphrodite package. We take our styles object and wrap it in a call, so StyleSheet.create. We also add one level nesting to our styles object. Call everything button. Instead of assigning things to style, we'll use className.

We call our css function (styles.button). When we save, everything looks the exact same. If we inspect our element though, we notice that now we have a class instead of inline styles. Also if we look up in the head we see this data-aphrodite style tag, which contains styles that look suspiciously like what we defined here.

That's because when you call css and pass in a StyleSheet object, Aphrodite is parsing this code, turning it into css, and injecting it into the DOM. It also uses the object key to generate a unique class name, that it then shares and passes in as the className attribute.

Let's use css we already know, to add an active and a hover state to this button. We first define an active pseudo class, to add a boxShadow when someone's clicking on the button. It's beautiful. Next we'll add a hover pseudo class, so that when someone hovers on the button it turns colors.

Our button is a little easier to interact with now, and we get all the benefits of css like pseudo classes, along with the benefits of inline styles like encapsulation and avoiding selector wars and specificity problems.



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