Style prop now has the highest precendence

src/components/appear.js

@@ -51,7 +51,7 @@ class Appear extends Component {
         {({ opacity }) =>
           React.cloneElement(child, {
             className: 'fragment',
-            style: { ...child.props.style, opacity },
+            style: [child.props.style, this.props.style, opacity],
             ref: f => {
               this.fragmentRef = f;
             },

src/components/block-quote.js

@@ -8,7 +8,7 @@ export default class BlockQuote extends Component {
   render() {
     const typefaceStyle = this.context.typeface || {};
     return (
-      <blockquote className={this.props.className} style={[this.context.styles.components.blockquote, getStyles.call(this), this.props.style, typefaceStyle]}>
+      <blockquote className={this.props.className} style={[this.context.styles.components.blockquote, getStyles.call(this), typefaceStyle, this.props.style]}>
         {this.props.children}
       </blockquote>
     );

src/components/cite.js

@@ -8,7 +8,7 @@ export default class Cite extends Component {
   render() {
     const typefaceStyle = this.context.typeface || {};
     return (
-      <cite className={this.props.className} style={[this.context.styles.components.cite, getStyles.call(this), this.props.style, typefaceStyle]}>
+      <cite className={this.props.className} style={[this.context.styles.components.cite, getStyles.call(this), typefaceStyle, this.props.style]}>
         - {this.props.children}
       </cite>
     );

src/components/heading.js

@@ -79,7 +79,7 @@ export default class Heading extends Component {
       ) : (
         createElement(Tag, {
           className: this.props.className,
-          style: [this.context.styles.components.heading[`h${size}`], getStyles.call(this), styles.nonFit, style, typefaceStyle]
+          style: [this.context.styles.components.heading[`h${size}`], getStyles.call(this), styles.nonFit, typefaceStyle, style]
         }, children)
       )
     );

src/components/image.js

@@ -20,8 +20,8 @@ export default class Image extends Component {
         style={[
           this.context.styles.components.image,
           getStyles.call(this),
-          styles,
-          this.props.style
+          this.props.style,
+          styles
         ]}
       />
     );

src/components/link.js

@@ -8,7 +8,7 @@ export default class Link extends Component {
   render() {
     const typefaceStyle = this.context.typeface || {};
     return (
-      <a className={this.props.className} href={this.props.href} target={this.props.target} style={[this.context.styles.components.link, getStyles.call(this), this.props.style, typefaceStyle]}>
+      <a className={this.props.className} href={this.props.href} target={this.props.target} style={[this.context.styles.components.link, getStyles.call(this), typefaceStyle, this.props.style]}>
         {this.props.children}
       </a>
     );

src/components/list-item.js

@@ -8,7 +8,7 @@ export default class ListItem extends Component {
   render() {
     const typefaceStyle = this.context.typeface || {};
     return (
-      <li className={this.props.className} style={[this.context.styles.components.listItem, getStyles.call(this), this.props.style, typefaceStyle]}>
+      <li className={this.props.className} style={[this.context.styles.components.listItem, getStyles.call(this), typefaceStyle, this.props.style]}>
         {this.props.children}
       </li>
     );

src/components/quote.js

@@ -8,7 +8,7 @@ export default class Quote extends Component {
   render() {
     const typefaceStyle = this.context.typeface || {};
     return (
-      <span className={this.props.className} style={[this.context.styles.components.quote, getStyles.call(this), this.props.style, typefaceStyle]}>
+      <span className={this.props.className} style={[this.context.styles.components.quote, getStyles.call(this), typefaceStyle, this.props.style]}>
         {this.props.children}
       </span>
     );

src/components/slide.js

@@ -175,9 +175,9 @@ class Slide extends React.PureComponent {
             }}
             className={`${contentClass} spectacle-content`}
             style={[
-              styles.content,
               this.context.styles.components.content,
               this.context.overview && overViewStyles.content,
+              styles.content,
             ]}
           >
             {children}

src/components/table-header-item.js

@@ -8,7 +8,7 @@ export default class TableHeaderItem extends Component {
   render() {
     const typefaceStyle = this.context.typeface || {};
     return (
-      <td className={this.props.className} style={[this.context.styles.components.tableHeaderItem, getStyles.call(this), this.props.style, typefaceStyle]}>
+      <td className={this.props.className} style={[this.context.styles.components.tableHeaderItem, getStyles.call(this), typefaceStyle, this.props.style]}>
         {this.props.children}
       </td>
     );

src/components/table-item.js

@@ -8,7 +8,7 @@ export default class TableItem extends Component {
   render() {
     const typefaceStyle = this.context.typeface || {};
     return (
-      <td className={this.props.className} style={[this.context.styles.components.tableItem, getStyles.call(this), this.props.style, typefaceStyle]}>
+      <td className={this.props.className} style={[this.context.styles.components.tableItem, getStyles.call(this), typefaceStyle, this.props.style]}>
         {this.props.children}
       </td>
     );

src/components/text.js

@@ -76,7 +76,7 @@ export default class Text extends Component {
           </span>
         </div>
       ) : (
-        <p className={this.props.className} style={[this.context.styles.components.text, getStyles.call(this), styles.nonFit, style, typefaceStyle]}>
+        <p className={this.props.className} style={[this.context.styles.components.text, getStyles.call(this), styles.nonFit, typefaceStyle, style]}>
           {children}
         </p>
       )