Adding style override capabilities

Author: kenwheeler

src/block-quote.jsx

@@ -6,7 +6,7 @@ import Radium from "radium";
 class BlockQuote extends Base {
   render() {
     return (
-      <blockquote style={[this.context.styles.components.blockquote, this.getStyles()]}>
+      <blockquote style={[this.context.styles.components.blockquote, this.getStyles(), this.props.style]}>
         {this.props.children}
       </blockquote>
     );

src/code-pane.jsx

@@ -13,7 +13,7 @@ class CodePane extends Base {
   }
   render() {
     return (
-      <pre style={[this.context.styles.components.codePane.pre, this.getStyles()]}>
+      <pre style={[this.context.styles.components.codePane.pre, this.getStyles(), this.props.style]}>
         <code
           className="hljs"
           style={this.context.styles.components.codePane.code}

src/code.jsx

@@ -6,7 +6,7 @@ import Radium from "radium";
 class Code extends Base {
   render() {
     return (
-      <code style={[this.context.styles.components.code, this.getStyles()]}>
+      <code style={[this.context.styles.components.code, this.getStyles(), this.props.style]}>
         {this.props.children}
       </code>
     );

src/fill.jsx

@@ -8,7 +8,7 @@ class Fill extends React.Component {
       flex: 1
     };
     return (
-      <div style={[styles]}>
+      <div style={[styles, this.props.style]}>
         {this.props.children}
       </div>
     );

src/fit.jsx

@@ -8,7 +8,7 @@ class Fit extends React.Component {
       flex: 0
     };
     return (
-      <div style={[styles]}>
+      <div style={[styles, this.props.style]}>
         {this.props.children}
       </div>
     );

src/heading.jsx

@@ -60,7 +60,7 @@ class Heading extends Base {
     ? <div
         style={[
           this.context.styles.components.heading["h" + this.props.size],
-          this.getStyles()]}>
+          this.getStyles(), this.props.style]}>
         <svg {...this.props}
           viewBox={viewBox}
           style={styles.svg}>
@@ -74,7 +74,7 @@ class Heading extends Base {
         </svg>
       </div>
     : React.createElement(Tag, {
-        style: [this.context.styles.components.heading["h" + this.props.size], this.getStyles()]
+        style: [this.context.styles.components.heading["h" + this.props.size], this.getStyles(), this.props.style]
       }, this.props.children);
   }
 }

src/image.jsx

@@ -16,7 +16,8 @@ class Image extends Base {
         style={[
           this.context.styles.components.image,
           this.getStyles(),
-          styles]} />
+          styles,
+          this.props.style]} />
     );
   }
 }

src/layout.jsx

@@ -8,7 +8,7 @@ class Layout extends React.Component {
       display: "flex"
     };
     return (
-      <div style={[styles]}>
+      <div style={[styles, this.props.style]}>
         {this.props.children}
       </div>
     );

src/link.jsx

@@ -6,7 +6,7 @@ import Radium from "radium";
 class Link extends Base {
   render() {
     return (
-      <a href={this.props.href} style={[this.context.styles.components.link, this.getStyles()]}>
+      <a href={this.props.href} style={[this.context.styles.components.link, this.getStyles(), this.props.style]}>
         {this.props.children}
       </a>
     );

src/list-item.jsx

@@ -6,7 +6,7 @@ import Radium from "radium";
 class ListItem extends Base {
   render() {
     return (
-      <li style={[this.context.styles.components.listItem, this.getStyles()]}>
+      <li style={[this.context.styles.components.listItem, this.getStyles(), this.props.style]}>
         {this.props.children}
       </li>
     );