Add Inactive And Active Component Styles With Radium as a react til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_596 TILs and counting..._
+_597 TILs and counting..._
 
 ---
 
@@ -422,6 +422,7 @@ _596 TILs and counting..._
 
 - [Accessing Env Vars In create-react-app](react/accessing-env-vars-in-create-react-app.md)
 - [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
+- [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md)
 - [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
 - [Passing Props Down To React-Router Route](react/passing-props-down-to-react-router-route.md)
 - [Proxy To An API Server In Development With CRA](react/proxy-to-an-api-server-in-development-with-cra.md)

react/inactive-and-active-component-styles-with-radium.md

@@ -0,0 +1,45 @@
+# Inactive And Active Component Styles With Radium
+
+[Radium](https://github.com/FormidableLabs/radium) is "toolchain for React
+component styling" allowing you to do comprehensive inline styling with CSS.
+
+Often times, especially in the case of a series of nav elements, there is a
+need to style one element as _active_ while styling the rest as _inactive_.
+This can be achieved with Radium by defining two groups of styles (`base`
+and `active`) and then relying on props to conditionally apply the active
+style.
+
+```javascript
+import React from 'react';
+import Radium from 'radium';
+
+const styles = {
+  base: {
+    textDecoration: "none",
+    color: "gray",
+  },
+  active: {
+    color: "black",
+    backgroundColor: "lightgray",
+  },
+};
+
+let NavItem = ({ label, path, active }) => {
+  return (
+    <a
+      href={path}
+      style={[
+        styles.base,
+        styles[active && 'active'],
+      ]}
+    >{label}</a>
+  );
+};
+
+NavItem = Radium(NavItem);
+```
+
+With Radium, our `base` (_inactive_) styles always get applied. Then, the
+`active` styles only get applied when the `active` prop is true. We produce
+a Radium-ified version of our `NavItem` on the last line so that Radium can
+handle all of the styling of the component.