use inline styles overrides :)

cc @jedwatson

app/lib/components/header.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import Tabs_ from './tabs';
-import overrideStyles from '../utils/override-style';
 import Component from '../component';
 import { decorate, getTabsProps } from '../utils/plugins';
 
@@ -62,7 +61,7 @@ export default class Header extends Component {
       onChange: this.onChangeIntent
     });
     return <header
-      ref={ overrideStyles({ backgroundColor }) }
+      style={{ backgroundColor }}
       className={ css('header', isMac && 'headerRounded') }
       onMouseDown={ this.onHeaderMouseDown }>
         { this.props.customChildrenBefore }

app/lib/components/tab.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import Component from '../component';
-import overrideStyle from '../utils/override-style';
 
 export default class Tab extends Component {
   constructor () {
@@ -28,7 +27,7 @@ export default class Tab extends Component {
       onMouseEnter={ this.hover }
       onMouseLeave={ this.blur }
       onClick={ this.props.onClick }
-      ref={ overrideStyle({ borderColor }) }
+      style={{ borderColor }}
       className={ css(
         'tab',
         isFirst && 'first',

app/lib/components/tabs.js

@@ -1,7 +1,6 @@
 import Tab_ from './tab';
 import React from 'react';
 import Component from '../component';
-import overrideStyle from '../utils/override-style';
 import { decorate, getTabProps } from '../utils/plugins';
 
 const Tab = decorate(Tab_, 'Tab');
@@ -22,7 +21,7 @@ export default class Tabs extends Component {
           ? 1 === tabs.length
             ? <div className={ css('title') }>{ tabs[0].title }</div>
             : <ul
-                ref={overrideStyle({ borderColor })}
+                style={{ borderColor }}
                 className={ css('list') }>
                 {
                   tabs.map((tab, i) => {

app/lib/containers/hyperterm.js

@@ -4,7 +4,6 @@ import TermsContainer from './terms';
 import NotificationsContainer from './notifications';
 import Component from '../component';
 import Mousetrap from 'mousetrap';
-import overrideStyles from '../utils/override-style';
 import { moveTo, moveLeft, moveRight } from '../actions/ui';
 import { connect } from '../utils/plugins';
 
@@ -74,7 +73,7 @@ class HyperTerm extends Component {
     const { isMac, customCSS, borderColor } = this.props;
     return <div onClick={ this.focusActive }>
       <div
-        ref={ overrideStyles({ borderColor }) }
+        style={{ borderColor }}
         className={ css('main', isMac && 'mainRounded') }>
         <HeaderContainer />
         <TermsContainer ref_={this.onTermsRef} />