The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Styling React Components With Aphrodite

Styling React Components With Aphrodite

2:29
[Aphrodite](https://github.com/Khan/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.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?