diff --git a/docs/src/app/components/code-example/code-example.jsx b/docs/src/app/components/code-example/code-example.jsx
index 7475511b0d5a27..7f3690ecfd38a3 100644
--- a/docs/src/app/components/code-example/code-example.jsx
+++ b/docs/src/app/components/code-example/code-example.jsx
@@ -6,14 +6,22 @@ var React = require('react'),
 class CodeExample extends React.Component {
 
   render() {
+    var borderColor = this.context.theme.palette.borderColor;
     var style = {
-      color: this.context.theme.palette.textColor
+      label: {
+        color: borderColor
+      },
+      block: {
+        borderRight: 'solid 1px ' + borderColor,
+        borderBottom: 'solid 1px ' + borderColor,
+        borderRadius: '0 0 2px 0'
+      }
     };
 
     return (
       <mui.Paper className="code-example">
-        <div className="example-label" style={style}>example</div>
-        <div className="example-block">
+        <div className="example-label" style={style.label}>example</div>
+        <div className="example-block" style={style.block}>
           {this.props.children}
         </div>
         <CodeBlock>{this.props.code}</CodeBlock>
diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx
index 2f1b645fe0320e..2df9de0d9ece25 100644
--- a/docs/src/app/components/pages/home.jsx
+++ b/docs/src/app/components/pages/home.jsx
@@ -18,10 +18,10 @@ class HomePage extends React.Component {
         color: ThemeManager.palette.primary1Color,
       },
       githubStyle: {
-        margin: '16px 32px 0px 8px',
+        margin: '16px 32px 0px 8px'
       },
       demoStyle: {
-        margin: '16px 32px 0px 32px',
+        margin: '16px 32px 0px 32px'
       },
     }
   }
@@ -40,8 +40,20 @@ class HomePage extends React.Component {
                 Components <span className="no-wrap">that
                 Implement</span> <span className="no-wrap">Google&apos;s Material Design</span>
               </h2>
-              <RaisedButton className="demo-button" label="Demo" onTouchTap={this._onDemoClick} linkButton={true} style={this._raisedButton().demoStyle} labelStyle={this._raisedButton().label}/>
-              <RaisedButton className="github-button" label="GitHub" linkButton={true} href="https://github.com/callemall/material-ui" style={this._raisedButton().githubStyle} labelStyle={this._raisedButton().label}/>
+              <RaisedButton 
+                className="demo-button" 
+                label="Demo" 
+                onTouchTap={this._onDemoClick}
+                linkButton={true} 
+                style={this._raisedButton().demoStyle} 
+                labelStyle={this._raisedButton().label}/>
+              <RaisedButton 
+                className="github-button" 
+                label="GitHub" 
+                linkButton={true} 
+                href="https://github.com/callemall/material-ui" 
+                style={this._raisedButton().githubStyle} 
+                labelStyle={this._raisedButton().label}/>
             </div>
           </div>
         </div>
diff --git a/docs/src/less/main.less b/docs/src/less/main.less
index ef6bf51f9a3c38..7e225314b0516f 100644
--- a/docs/src/less/main.less
+++ b/docs/src/less/main.less
@@ -91,10 +91,7 @@ body, h1, h2, h3, h4, h5, h6 {
     text-transform: uppercase;
     color: rgba(0, 0, 0, 0.26); // minBlack;
     padding: 8px;
-    border-right: solid 1px @border-color;
-    border-bottom: solid 1px @border-color;
     margin-bottom: 0;
-    border-radius: 0 0 2px 0;
   }
 
   .example-block,
diff --git a/src/app-bar.jsx b/src/app-bar.jsx
index c85f2038b8b3b6..a71276bc34ebd8 100644
--- a/src/app-bar.jsx
+++ b/src/app-bar.jsx
@@ -32,52 +32,6 @@ var AppBar = React.createClass({
     }
   },
 
-  /** Styles */
-
-  _main: function() {
-    return this.mergeAndPrefix({
-      zIndex: 5,
-      width: '100%',
-      minHeight: this.getSpacing().desktopKeylineIncrement,
-      backgroundColor: this.getThemeVariables().color,
-    });
-  },
-
-  _title: function() {
-    return {      
-      float: 'left',
-      paddingTop: 0,
-      letterSpacing: 0,
-      fontSize: '24px',
-      fontWeight: Typography.fontWeightNormal,
-      color: this.getThemeVariables().textColor,
-      lineHeight: this.getSpacing().desktopKeylineIncrement + 'px',
-    };
-  },
-
-  _iconButton: function() {
-    var iconButtonSize = this.context.theme.component.button.iconButtonSize;
-    return {
-      style: {
-        marginTop: (this.getThemeVariables().height - iconButtonSize) / 2,
-        float: 'left',
-        marginRight: 8,
-        marginLeft: -16,
-      },
-      iconStyle: {
-        fill: this.getThemeVariables().textColor,
-        color: this.getThemeVariables().textColor,
-      }
-    }
-  },
-
-  _paper: function() {
-    return {
-      paddingLeft: this.getSpacing().desktopGutter,
-      paddingRight: this.getSpacing().desktopGutter,
-    };
-  },
-
   componentDidMount: function() {
     if (process.NODE_ENV !== 'production' && 
        (this.props.iconElementLeft && this.props.iconClassNameLeft)) {
@@ -95,40 +49,79 @@ var AppBar = React.createClass({
     return this.context.theme.component.appBar;
   },
 
+  getStyles: function(){
+    var iconButtonSize = this.context.theme.component.button.iconButtonSize;
+    var styles = {
+      root: {
+        zIndex: 5,
+        width: '100%',
+        minHeight: this.getSpacing().desktopKeylineIncrement,
+        backgroundColor: this.getThemeVariables().color
+      },
+      title: {
+        float: 'left',
+        paddingTop: 0,
+        letterSpacing: 0,
+        fontSize: '24px',
+        fontWeight: Typography.fontWeightNormal,
+        color: this.getThemeVariables().textColor,
+        lineHeight: this.getSpacing().desktopKeylineIncrement + 'px'
+      },
+      iconButton: {
+        style: {
+          marginTop: (this.getThemeVariables().height - iconButtonSize) / 2,
+          float: 'left',
+          marginRight: 8,
+          marginLeft: -16
+        },
+        iconStyle: {
+          fill: this.getThemeVariables().textColor,
+          color: this.getThemeVariables().textColor
+        }
+      },
+      paper: {
+        paddingLeft: this.getSpacing().desktopGutter,
+        paddingRight: this.getSpacing().desktopGutter
+      }
+    };
+    return styles;
+  },
+
   render: function() {
     var {
       onTouchTap,
       ...other
     } = this.props;
+    var styles = this.getStyles();
 
     var title, menuElementLeft, menuElementRight;
-    var iconRightStyle = this.mergeAndPrefix(this._iconButton().style, {
+    var iconRightStyle = this.mergeAndPrefix(styles.iconButton.style, {
       float: 'right',
       marginRight: -16,
-      marginLeft: 8,
+      marginLeft: 8
     });
 
     if (this.props.title) {
       // If the title is a string, wrap in an h1 tag.
       // If not, just use it as a node.
       title = Object.prototype.toString.call(this.props.title) === '[object String]' ?
-        <h1 style={this._title()}>{this.props.title}</h1> :
+        <h1 style={this.mergeAndPrefix(styles.title)}>{this.props.title}</h1> :
         this.props.title;
     }
 
     if (this.props.showMenuIconButton) {
       if (this.props.iconElementLeft) {
         menuElementLeft = (
-          <div style={this._iconButton().style}> 
+          <div style={styles.iconButton.style}> 
             {this.props.iconElementLeft} 
           </div>
         );
       } else {
-        var child = (this.props.iconClassNameLeft) ? '' : <NavigationMenu style={this._iconButton().iconStyle}/>;
+        var child = (this.props.iconClassNameLeft) ? '' : <NavigationMenu style={this.mergeAndPrefix(styles.iconButton.iconStyle)}/>;
         menuElementLeft = (
           <IconButton
-            style={this._iconButton().style}
-            iconStyle={this._iconButton().iconStyle}
+            style={this.mergeAndPrefix(styles.iconButton.style)}
+            iconStyle={this.mergeAndPrefix(styles.iconButton.iconStyle)}
             iconClassName={this.props.iconClassNameLeft}
             onTouchTap={this._onMenuIconButtonTouchTap}>
               {child}
@@ -146,7 +139,7 @@ var AppBar = React.createClass({
         menuElementRight = (
           <IconButton
             style={iconRightStyle}
-            iconStyle={this._iconButton().iconStyle}
+            iconStyle={this.mergeAndPrefix(styles.iconButton.iconStyle)}
             iconClassName={this.props.iconClassNameRight}
             onTouchTap={this._onMenuIconButtonTouchTap}>
           </IconButton>
@@ -155,10 +148,15 @@ var AppBar = React.createClass({
     }
 
     return (
-      <Paper rounded={false} className={this.props.className}  style={this._main()} innerStyle={this._paper()} zDepth={this.props.zDepth}>
-        {menuElementLeft}
-        {title}
-        {menuElementRight}
+      <Paper 
+        rounded={false} 
+        className={this.props.className}  
+        style={this.mergeAndPrefix(styles.root, this.props.style)} 
+        innerStyle={this.mergeAndPrefix(styles.paper)} 
+        zDepth={this.props.zDepth}>
+          {menuElementLeft}
+          {title}
+          {menuElementRight}
       </Paper>
     );
   },
diff --git a/src/checkbox.jsx b/src/checkbox.jsx
index 92bb19c44a505d..252074097beb6c 100644
--- a/src/checkbox.jsx
+++ b/src/checkbox.jsx
@@ -31,60 +31,72 @@ var Checkbox = React.createClass({
     return this.context.theme.component.checkbox;
   },
 
+  getStyles: function() {
+    var checkboxSize = 24;
+    var styles = {
+      icon: {
+          height: checkboxSize,
+          width: checkboxSize,
+      },
+      check: {
+          positiion: 'absolute',
+          opacity: 0, 
+          transform: 'scale(0)',
+          transitionOrigin: '50% 50%',
+          transition: Transitions.easeOut('450ms', 'opacity', '0ms') + ', ' + 
+                      Transitions.easeOut('0ms', 'transform', '450ms'),
+          fill: this.getTheme().checkedColor   
+      },
+      box: {
+          position: 'absolute',
+          opacity: 1,
+          fill: this.getTheme().boxColor,          
+          transition: Transitions.easeOut('2s', null, '200ms') 
+      },
+      checkWhenSwitched: {
+        opacity: 1,
+        transform: 'scale(1)',
+        transition: Transitions.easeOut('0ms', 'opacity', '0ms') + ', ' + 
+                    Transitions.easeOut('800ms', 'transform', '0ms')
+      },
+      boxWhenSwitched: {
+        transition: Transitions.easeOut('100ms', null, '0ms'),
+        fill: this.getTheme().checkedColor
+      },
+      checkWhenDisabled: {
+        fill: this.getTheme().disabledColor
+      },
+      boxWhenDisabled: {
+        fill: this.getTheme().disabledColor
+      }
+    };
+    return styles;
+  },
+
   render: function() {
     var {
       onCheck,
       ...other
     } = this.props;
 
-    var checkboxSize = 24;
-
-    var iconStyles = {
-        height: checkboxSize,
-        width: checkboxSize,
-    }
-
-    var checkStyles = {
-        positiion: 'absolute',
-        opacity: 0,
-        transform: 'scale(0)',
-        transitionOrigin: '50% 50%',
-        transition: Transitions.easeOut('450ms', 'opacity', '0ms') + ', ' + 
-                    Transitions.easeOut('0ms', 'transform', '450ms'),
-        fill: this.getTheme().checkedColor   
-    }
-
-    var boxStyles = {
-        position: 'absolute',
-        opacity: 1,
-        fill: this.getTheme().boxColor,          
-        transition: Transitions.easeOut('2s', null, '200ms') 
-    }
-
-    if (this.state.switched) {
-      checkStyles = this.mergeStyles(checkStyles, {
-          opacity: 1,
-          transform: 'scale(1)',
-          transition: Transitions.easeOut('0ms', 'opacity', '0ms') + ', ' + 
-                      Transitions.easeOut('800ms', 'transform', '0ms')
-        });
-      boxStyles = this.mergeStyles(boxStyles, {
-          transition: Transitions.easeOut('100ms', null, '0ms'),
-          fill: this.getTheme().checkedColor
-        });
-    }
-
-    if (this.props.disabled) {
-      checkStyles.fill = this.getTheme().disabledColor;
-      boxStyles.fill = this.getTheme().disabledColor;
-    }
-
-    if (this.state.switched && this.props.disabled) boxStyles.opacity = 0;
+    var styles = this.getStyles();
 
     var checkboxElement = (
       <div>
-        <CheckboxOutline style={boxStyles} />
-        <CheckboxChecked style={checkStyles} />
+        <CheckboxOutline style={
+          this.mergeAndPrefix(
+            styles.box,
+            this.state.switched && styles.boxWhenSwitched,
+            this.props.style,
+            this.props.disabled && styles.boxWhenDisabled
+        )} />
+        <CheckboxChecked style={
+          this.mergeAndPrefix(
+            styles.check,
+            this.state.switched && styles.checkWhenSwitched,
+            this.props.style,            
+            this.props.disabled && styles.checkWhenDisabled
+        )} />
       </div>
     );
 
@@ -93,7 +105,7 @@ var Checkbox = React.createClass({
       inputType: "checkbox",
       switched: this.state.switched,
       switchElement: checkboxElement,
-      iconStyle: iconStyles,
+      iconStyle: styles.icon,
       onSwitch: this._handleCheck,
       onParentShouldUpdate: this._handleStateChange,
       defaultSwitched: this.props.defaultChecked,
diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx
index 2929cac86b03bf..7aea4178f77733 100644
--- a/src/date-picker/calendar.jsx
+++ b/src/date-picker/calendar.jsx
@@ -60,7 +60,6 @@ var Calendar = React.createClass({
       root: {
         fontSize: '12px'
       },
-
       calendarContainer: {
         width: isLandscape ? '280px' : '100%',
         height: weekCount === 5 ? '268px' :
@@ -68,13 +67,11 @@ var Calendar = React.createClass({
         float: isLandscape ? 'right' : 'none',
         transition: Transitions.easeOut('150ms', 'height')
       },
-
       dateDisplay: {
         width: isLandscape ? '280px' : '100%',
         height: '100%',
         float: isLandscape ? 'left' : 'none'
       },
-
       weekTitle: {
         padding: '0 14px',
         lineHeight: '12px',
@@ -83,7 +80,6 @@ var Calendar = React.createClass({
         fontWeight: '500',
         margin: 0
       },
-
       weekTitleDay: {
         listStyle: 'none',
         float: 'left',
diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx
index 971fcf589af3ba..20a140023e7933 100644
--- a/src/date-picker/date-display.jsx
+++ b/src/date-picker/date-display.jsx
@@ -139,7 +139,7 @@ var DateDisplay = React.createClass({
     };
 
     return (
-      <div {...other} style={this.mergeAndPrefix(styles.root)}>
+      <div {...other} style={this.mergeAndPrefix(styles.root, this.props.style)}>
 
         <div style={styles.dowContainer}>
           <SlideInTransitionGroup
diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx
index ff4efffd8126cf..6a264b9d08a68f 100644
--- a/src/date-picker/date-picker.jsx
+++ b/src/date-picker/date-picker.jsx
@@ -1,5 +1,5 @@
 var React = require('react');
-var Classable = require('../mixins/classable');
+var StylePropable = require('../mixins/style-propable');
 var WindowListenable = require('../mixins/window-listenable');
 var DateTime = require('../utils/date-time');
 var KeyCode = require('../utils/key-code');
@@ -8,7 +8,7 @@ var TextField = require('../text-field');
 
 var DatePicker = React.createClass({
 
-  mixins: [Classable, WindowListenable],
+  mixins: [StylePropable, WindowListenable],
 
   propTypes: {
     defaultDate: React.PropTypes.object,
@@ -57,10 +57,6 @@ var DatePicker = React.createClass({
       autoOk,
       ...other
     } = this.props;
-    var classes = this.getClasses('mui-date-picker', {
-      'mui-is-landscape': this.props.mode === 'landscape',
-      'mui-is-inline': this.props.mode === 'inline'
-    });
     var defaultInputValue;
 
     if (this.props.defaultDate) {
@@ -68,7 +64,7 @@ var DatePicker = React.createClass({
     }
 
     return (
-      <div className={classes}>
+      <div style={this.props.style}>
         <TextField
           {...other}
           ref="input"
diff --git a/src/dialog-window.jsx b/src/dialog-window.jsx
index 8876e4d1d529ec..320daf8c68a3c4 100644
--- a/src/dialog-window.jsx
+++ b/src/dialog-window.jsx
@@ -61,56 +61,6 @@ var DialogWindow = React.createClass({
     this._focusOnAction();
   },
 
-  /** Styles */
-  _main: function() {
-    var style = {
-      position: 'fixed',
-      boxSizing: 'border-box',
-      WebkitTapHighlightColor: 'rgba(0,0,0,0)',
-      zIndex: 10,
-      top: 0,
-      left: -10000,
-      width: '100%',
-      height: '100%',
-      transition: Transitions.easeOut('0ms', 'left', '450ms'),
-      color: this.getTheme().palette.textColor
-    };
-
-    if (this.state.open) {
-      style = this.mergeAndPrefix(style, {
-        left: 0,
-        transition: Transitions.easeOut('0ms', 'left', '0ms'),
-      });
-    }
-
-    return this.mergeAndPrefix(style);
-  },
-
-  _contents: function() {
-    var style = {
-      boxSizing: 'border-box',
-      WebkitTapHighlightColor: 'rgba(0,0,0,0)',
-      transition: Transitions.easeOut(),
-      position: 'relative',
-      width: '75%',
-      maxWidth: (this.getSpacing().desktopKeylineIncrement * 12),
-      margin: '0 auto',
-      zIndex: 10,
-      background: this.getTheme().palette.canvasColor,
-      opacity: 0,
-    };
-
-    if (this.state.open) {
-      style = this.mergeStyles(style, {
-        opacity: 1,
-        top: 0,
-        transform: 'translate3d(0, ' + this.getSpacing().desktopKeylineIncrement + 'px, 0)',
-      });
-    }
-
-    return this.mergeAndPrefix(style, this.props.contentStyle);
-  },
-
   getTheme: function() {
     return this.context.theme;
   },
@@ -119,14 +69,54 @@ var DialogWindow = React.createClass({
     return this.context.theme.spacing;
   },
 
+  getStyles: function() {
+    var styles = {
+      root: {
+        position: 'fixed',
+        boxSizing: 'border-box',
+        WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+        zIndex: 10,
+        top: 0,
+        left: -10000,
+        width: '100%',
+        height: '100%',
+        transition: Transitions.easeOut('0ms', 'left', '450ms'),
+        color: this.getTheme().palette.textColor
+      },
+      contents: {
+        boxSizing: 'border-box',
+        WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+        transition: Transitions.easeOut(),
+        position: 'relative',
+        width: '75%',
+        maxWidth: (this.getSpacing().desktopKeylineIncrement * 12),
+        margin: '0 auto',
+        zIndex: 10,
+        background: this.getTheme().palette.canvasColor,
+        opacity: 0
+      },
+      rootWhenOpen: {
+        left: 2,
+        transition: Transitions.easeOut('0ms', 'left', '0ms')
+      },
+      contentsWhenOpen: {
+        opacity: 1,
+        top: 0,
+        transform: 'translate3d(0, ' + this.getSpacing().desktopKeylineIncrement + 'px, 0)'
+      }
+    };
+    return styles;
+  },
+
   render: function() {
     var actions = this._getActionsContainer(this.props.actions);
+    var styles = this.getStyles();
 
     return (
-      <div ref="container" style={this._main()}>
+      <div ref="container" style={this.mergeAndPrefix(styles.root, this.props.style, this.state.open && styles.rootWhenOpen)}>
         <Paper
           ref="dialogWindow"
-          style={this._contents()}
+          style={this.mergeAndPrefix(styles.contents, this.props.contentStyle, this.state.open && styles.contentsWhenOpen)}
           className={this.props.contentClassName}
           zDepth={4}>
           {this.props.children}
diff --git a/src/drop-down-icon.jsx b/src/drop-down-icon.jsx
index 208e482cf7cdd4..41f99d50de8e56 100644
--- a/src/drop-down-icon.jsx
+++ b/src/drop-down-icon.jsx
@@ -37,41 +37,36 @@ var DropDownIcon = React.createClass({
     this.setState({ open: false });
   },
 
-  /** Styles */
-
-  _main: function() {
+  getStyles: function() {
     var iconWidth = 48;
-    return this.mergeAndPrefix({
-      display: 'inline-block',
-      width: iconWidth + 'px !important',
-      position: 'relative',
-      height: Spacing.desktopToolbarHeight,
-      fontSize: Spacing.desktopDropDownMenuFontSize,
-      cursor: 'pointer'
-    });
-  },
-
-  _menu: function() {
-    
-    return {
-      transition: Transitions.easeOut(),
-      right: '-14px !important',
-      top: '9px !important',
-      opacity: (this.props.open) ? 1 : 0,
-    }
-  },
-
-  _menuItem: function() { // similair to drop down menu's menu item styles
-    return {
-      paddingRight: (Spacing.iconSize + (Spacing.desktopGutterLess*2)),
-      height: Spacing.desktopDropDownMenuItemHeight,
-      lineHeight: Spacing.desktopDropDownMenuItemHeight + 'px',
-    }
+    var styles = {
+      root: {
+        display: 'inline-block',
+        width: iconWidth + 'px !important',
+        position: 'relative',
+        height: Spacing.desktopToolbarHeight,
+        fontSize: Spacing.desktopDropDownMenuFontSize,
+        cursor: 'pointer'
+       },
+      menu: {
+        transition: Transitions.easeOut(),
+        right: '-14px !important',
+        top: '9px !important',
+        opacity: (this.props.open) ? 1 : 0
+      },
+      menuItem: { // similair to drop down menu's menu item styles
+        paddingRight: (Spacing.iconSize + (Spacing.desktopGutterLess*2)),
+        height: Spacing.desktopDropDownMenuItemHeight,
+        lineHeight: Spacing.desktopDropDownMenuItemHeight + 'px'
+      }
+    };
+    return styles;   
   },
 
   render: function() {
+    var styles = this.getStyles();
     return (
-      <div style={this._main()}>
+      <div ref="root" style={this.mergeAndPrefix(styles.root, this.props.style)}>
           <div onClick={this._onControlClick}>
               <FontIcon 
                 className={this.props.iconClassName} 
@@ -81,9 +76,9 @@ var DropDownIcon = React.createClass({
           </div>
           <Menu 
             ref="menuItems" 
-            style={this._menu()} 
+            style={this.mergeAndPrefix(styles.menu)} 
             menuItems={this.props.menuItems}
-            menuItemStyle={this._menuItem()}
+            menuItemStyle={styles.menuItem}
             hideable={true} 
             visible={this.state.open} 
             onItemClick={this._onMenuItemClick} />
diff --git a/src/drop-down-menu.jsx b/src/drop-down-menu.jsx
index 4f56c5335d160b..98d1c51a3a59de 100644
--- a/src/drop-down-menu.jsx
+++ b/src/drop-down-menu.jsx
@@ -56,115 +56,11 @@ var DropDownMenu = React.createClass({
   },
 
   componentWillReceiveProps: function(nextProps) {
-    if (props.hasOwnProperty('selectedIndex')) {
+    if (nextProps.hasOwnProperty('selectedIndex')) {
       this._setSelectedIndex(nextProps);
     }
  },
 
-  /** Styles */
-  _main: function() {
-    var style = {
-      transition: Transitions.easeOut(),
-      position: 'relative',
-      display: 'inline-block',
-      height: this.getSpacing().desktopToolbarHeight,
-      fontSize: this.getSpacing().desktopDropDownMenuFontSize
-    };
-
-    if (this.state.open) style.opacity = 1;
-
-    return this.mergeAndPrefix(style);
-  },
-
-  _control: function() {
-    var style = {
-      cursor: 'pointer',
-      position: 'static',
-      height: '100%',
-    };
-
-    if (this.props.styleControl) this.mergeAndPrefix(style, this.props.styleControl);
-
-    return style;
-  },
-
-  _controlBg: function() { 
-    var style = {
-      transition: Transitions.easeOut(),
-      backgroundColor: this.context.theme.component.menu.backgroundColor,
-      height: '100%',
-      width: '100%',
-      opacity: (this.state.open) ? 0 : 
-               (this.state.isHovered) ? 1 : 0,
-    };
-
-    if (this.props.styleControlBg) style = this.mergeAndPrefix(style, this.props.styleControlBg);
-  
-    return style;
-  },
-
-  _icon: function() {
-    var style = {
-      position: 'absolute',
-      top: ((this.getSpacing().desktopToolbarHeight - 24) / 2),
-      right: this.getSpacing().desktopGutterLess,
-      fill: this.context.theme.component.dropDownMenu.accentColor,
-    };
-
-    if (this.props.styleIcon) style = this.mergeAndPrefix(style, this.props.styleIcon);
-  
-    return style;
-  },
-
-  _label: function() {
-    var style = {
-      transition: Transitions.easeOut(),
-      lineHeight: this.getSpacing().desktopToolbarHeight + 'px',
-      position: 'absolute',
-      paddingLeft: this.getSpacing().desktopGutter,
-      top: 0,
-      opacity: 1,
-      color: this.getTextColor()
-    };
-
-    if (this.state.open) {
-      style = this.mergeAndPrefix(style, {
-        opacity: 0,
-        top: this.getSpacing().desktopToolbarHeight / 2,
-      });
-    }
-
-    if (this.props.styleLabel) style = this.mergeAndPrefix(style, this.props.styleLabel);
-  
-    return style;
-  },
-
-  _underline: function() {
-    var style = {
-      borderTop: 'solid 1px ' + this.context.theme.component.dropDownMenu.accentColor,
-      margin: '0 ' + this.getSpacing().desktopGutter + 'px',
-    };
-
-    if (this.props.styleUnderline) style =this.mergeAndPrefix(style, this.props.styleUnderline);
-  
-    return style;
-  },
-
-  _menuItem: function() {
-    var style = {
-      paddingRight: this.getSpacing().iconSize + 
-                    this.getSpacing().desktopGutterLess + 
-                    this.getSpacing().desktopGutterMini,
-      height: this.getSpacing().desktopDropDownMenuItemHeight,
-      lineHeight: this.getSpacing().desktopDropDownMenuItemHeight + 'px',
-      whiteSpace: 'nowrap',
-    };
-
-    if (this.props.styleMenuItem) style = this.mergeAndPrefix(style, this.props.styleMenuItem);
-  
-    return style;
-  },
-
   getSpacing: function() {
     return this.context.theme.spacing;
   },
@@ -173,21 +69,88 @@ var DropDownMenu = React.createClass({
     return this.context.theme.palette.textColor;
   },
 
+  getStyles: function(){
+    var accentColor = this.context.theme.component.dropDownMenu.accentColor;
+    var backgroundColor = this.context.theme.component.menu.backgroundColor;
+    var styles = {
+      root: {
+        transition: Transitions.easeOut(),
+        position: 'relative',
+        display: 'inline-block',
+        height: this.getSpacing().desktopToolbarHeight,
+        fontSize: this.getSpacing().desktopDropDownMenuFontSize
+      },
+      control: {
+        cursor: 'pointer',
+        position: 'static',
+        height: '100%'
+      },
+      controlBg: {
+        transition: Transitions.easeOut(),
+        backgroundColor: backgroundColor,
+        height: '100%',
+        width: '100%',
+        opacity: (this.state.open) ? 0 : 
+                 (this.state.isHovered) ? 1 : 0
+      },
+      icon: {
+        position: 'absolute',
+        top: ((this.getSpacing().desktopToolbarHeight - 24) / 2),
+        right: this.getSpacing().desktopGutterLess,
+        fill: this.context.theme.component.dropDownMenu.accentColor
+      },
+      label: {
+        transition: Transitions.easeOut(),
+        lineHeight: this.getSpacing().desktopToolbarHeight + 'px',
+        position: 'absolute',
+        paddingLeft: this.getSpacing().desktopGutter,
+        top: 0,
+        opacity: 1,
+        color: this.getTextColor()
+      },
+      underline: {
+        borderTop: 'solid 1px ' + accentColor,
+        margin: '0 ' + this.getSpacing().desktopGutter + 'px'
+      },
+      menuItem: {
+        paddingRight: this.getSpacing().iconSize + 
+                      this.getSpacing().desktopGutterLess + 
+                      this.getSpacing().desktopGutterMini,
+        height: this.getSpacing().desktopDropDownMenuItemHeight,
+        lineHeight: this.getSpacing().desktopDropDownMenuItemHeight + 'px',
+        whiteSpace: 'nowrap'
+      },
+      rootWhenOpen: {
+        opacity: 1
+      },
+      labelWhenOpen: {
+        opacity: 0,
+        top: this.getSpacing().desktopToolbarHeight / 2
+      }
+    };
+    return styles;
+  },
+
   render: function() {
+    var styles = this.getStyles();
     return (
       <div 
-        style={this._main()} 
-        className={this.props.className} 
+        ref="root"
         onMouseOut={this._handleMouseOut}
-        onMouseOver={this._handleMouseOver}>
-
-          <ClearFix style={this._control()} onClick={this._onControlClick}>
-            <Paper style={this._controlBg()} zDepth={0} />
-            <div style={this._label()}>
+        onMouseOver={this._handleMouseOver}
+        className={this.props.className}
+        style={this.mergeAndPrefix(
+          styles.root, 
+          this.state.open && styles.rootWhenOpen,
+          this.props.style)} >
+
+          <ClearFix style={this.mergeAndPrefix(styles.control, this.props.styleControl)} onClick={this._onControlClick}>
+            <Paper style={this.mergeAndPrefix(styles.controlBg, this.props.styleControlBg)} zDepth={0} />
+            <div style={this.mergeAndPrefix(styles.label, this.state.open && styles.labelWhenOpen, this.props.styleLabel)}>
               {this.props.menuItems[this.state.selectedIndex].text}
             </div>
-            <DropDownArrow style={this._icon()} hoverStyle={this.props.styleIconHover}/>
-            <div style={this._underline()}/>
+            <DropDownArrow style={this.mergeAndPrefix(styles.icon, this.props.styleIcon)} hoverStyle={this.props.styleIconHover}/>
+            <div style={this.mergeAndPrefix(styles.underline, this.props.styleUnderline)}/>
           </ClearFix>
 
           <Menu
@@ -195,7 +158,7 @@ var DropDownMenu = React.createClass({
             autoWidth={this.props.autoWidth}
             selectedIndex={this.state.selectedIndex}
             menuItems={this.props.menuItems}
-            menuItemStyle={this._menuItem()}
+            menuItemStyle={this.mergeAndPrefix(styles.menuItem, this.props.styleMenuItem)}
             hideable={true}
             visible={this.state.open}
             onItemClick={this._onMenuItemClick} />
diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx
index 5995404d765f0e..fcfa90761a90f2 100644
--- a/src/enhanced-button.jsx
+++ b/src/enhanced-button.jsx
@@ -57,33 +57,29 @@ var EnhancedButton = React.createClass({
     }
   }, 
 
-  /** Styles */
-  _main: function() {
-    var style = {
-      border: 10,
-      background: 'none',
-      boxSizing: 'border-box',
-      font: 'inherit',
-      fontFamily: this.context.theme.contentFontFamily,
-      WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-      WebkitApperance: 'button'
-    };
-
-    if (this.props.linkButton) {
-      style = this.mergeAndPrefix({
+  getStyles: function() {
+    var styles = {
+      root: {
+        border: 10,
+        background: 'none',
+        boxSizing: 'border-box',
+        font: 'inherit',
+        fontFamily: this.context.theme.contentFontFamily,
+        WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+        WebkitApperance: 'button'
+      },
+      rootWhenLinkButton: {
         display: 'inline-block',
         cursor: (this.props.disabled) ? 'default' : 'pointer',
-        textDecoration: 'none',
-      }, style);
-    }
-    
-    if (this.props.disabled) style.cursor = 'default';
-
-
-    return this.mergeAndPrefix(style);
+        textDecoration: 'none'
+      },
+      rootWhenDisabled: {
+        cursor: 'default'
+      }
+    };
+    return styles;
   },
 
-
   render: function() {
     var {
       centerRipple,
@@ -98,6 +94,13 @@ var EnhancedButton = React.createClass({
       onTouchTap,
       ...other } = this.props;
 
+    var styles = this.mergeAndPrefix(
+      this.getStyles().root,
+      this.props.linkButton && this.getStyles().rootWhenLinkButton,
+      this.props.disabled && this.getStyles().rootWhenDisabled,
+      this.props.style
+    );
+
     var touchRipple = (
       <TouchRipple
         ref="touchRipple"
@@ -116,7 +119,7 @@ var EnhancedButton = React.createClass({
         show={this.state.isKeyboardFocused} />
     );
     var buttonProps = {
-      style: this._main(),
+      style: styles,
       disabled: disabled,
       onBlur: this._handleBlur,
       onFocus: this._handleFocus,
diff --git a/src/enhanced-switch.jsx b/src/enhanced-switch.jsx
index 28f71a188a4e13..a77f56c3bea608 100644
--- a/src/enhanced-switch.jsx
+++ b/src/enhanced-switch.jsx
@@ -46,20 +46,21 @@ var EnhancedSwitch = React.createClass({
 
   getInitialState: function() {
     return {
-      isKeyboardFocused: false
+      isKeyboardFocused: false,
+      parentWidth: 100,
     };
   },
 
   getEvenWidth: function(){
     return (
       parseInt(window
-        .getComputedStyle(this.getDOMNode())
+        .getComputedStyle(React.findDOMNode(this.refs.root))
         .getPropertyValue('width'), 10)
     );
   },
 
   componentDidMount: function() {
-    var inputNode = this.refs.checkbox.getDOMNode();
+    var inputNode = React.findDOMNode(this.refs.checkbox);
     if (!this.props.switched || 
         this.props.switched == undefined ||
         inputNode.checked != this.props.switched) this.props.onParentShouldUpdate(inputNode.checked);
@@ -91,39 +92,19 @@ var EnhancedSwitch = React.createClass({
     return this.context.theme.palette;
   },
 
-  render: function() {
-    var {
-      type,
-      name,
-      value,
-      label,
-      onSwitch,
-      defaultSwitched,
-      onBlur,
-      onFocus,
-      onMouseUp,
-      onMouseDown,
-      onMouseOut,
-      onTouchStart,
-      onTouchEnd,
-      disableTouchRipple,
-      disableFocusRipple,
-      ...other
-    } = this.props;
-
+  getStyles: function() {
     var switchWidth = 60 - Spacing.desktopGutterLess;
     var labelWidth = this.state.parentWidth - 60;
-
-    var styles = this.mergeStyles({
+    var styles = {
+      root: {
         position: 'relative',
         cursor: this.props.disabled ? 'default' : 'pointer',
         overflow: 'visible',
         display: 'table',
         height: 'auto',
-        width: '100%',
-    });
-
-    var inputStyles = {
+        width: '100%'
+      },
+      input: {
         position: 'absolute',
         cursor: this.props.disabled ? 'default' : 'pointer',
         pointerEvents: 'all',
@@ -133,10 +114,17 @@ var EnhancedSwitch = React.createClass({
         zIndex: 2,
         left: 0,
         boxSizing: 'border-box', 
-        padding: 0,
-    };
-
-    var wrapStyles = this.mergeStyles({
+        padding: 0
+      },
+      label: {
+        float: 'left',
+        position: 'relative',
+        display: 'table-column',
+        width: labelWidth,
+        lineHeight: '24px',
+        color: this.getTheme().textColor
+      },
+      wrap: {
         transition: Transitions.easeOut(),
         float: 'left',
         position: 'relative',
@@ -146,16 +134,43 @@ var EnhancedSwitch = React.createClass({
           Spacing.desktopGutterLess : 0,
         marginLeft: (this.props.labelPosition == 'left') ? 
           Spacing.desktopGutterLess : 0
-    }, this.props.iconStyle);
+      },
+      ripple: {
+        height: '200%',
+        width: '200%',
+        top: '-12',
+        left: '-12'
+      }
+    };
+    return styles;
+  },
 
-    var labelStyles = {
-        float: 'left',
-        position: 'relative',
-        display: 'table-column',
-        width: labelWidth,
-        lineHeight: '24px',
-        color: this.getTheme().textColor
-    }
+  render: function() {
+    var {
+      type,
+      name,
+      value,
+      label,
+      onSwitch,
+      defaultSwitched,
+      onBlur,
+      onFocus,
+      onMouseUp,
+      onMouseDown,
+      onMouseOut,
+      onTouchStart,
+      onTouchEnd,
+      disableTouchRipple,
+      disableFocusRipple,
+      ...other
+    } = this.props;
+
+    var styles = this.getStyles();
+
+    styles.root.cursor = styles.root.input = this.props.disabled ? 'default' : 'pointer';
+
+    var wrapStyles = this.mergeAndPrefix(styles.wrap, this.props.iconStyle);
+    var rippleStyle = this.mergeAndPrefix(styles.ripple, this.props.rippleStyle);
 
     if (this.props.thumbStyle) {
       wrapStyles.marginLeft /= 2;
@@ -165,7 +180,7 @@ var EnhancedSwitch = React.createClass({
     var inputId = this.props.id || UniqueId.generate();
 
     var labelElement = this.props.label ? (
-      <label style={labelStyles} htmlFor={inputId}>
+      <label style={this.mergeAndPrefix(styles.label)} htmlFor={inputId}>
         {this.props.label}
       </label>
     ) : null;
@@ -173,11 +188,12 @@ var EnhancedSwitch = React.createClass({
     var inputProps = {
       ref: "checkbox",
       type: this.props.inputType,
+      style: this.mergeAndPrefix(styles.input),
       name: this.props.name,
       value: this.props.value,
       defaultChecked: this.props.defaultSwitched,
       onBlur: this._handleBlur,
-      onFocus: this._handleFocus,
+      onFocus: this._handleFocus
     };
 
     var hideTouchRipple = this.props.disabled || disableTouchRipple;
@@ -197,17 +213,9 @@ var EnhancedSwitch = React.createClass({
     var inputElement = (
       <input
         {...other}
-        {...inputProps}
-        style={inputStyles}/>
+        {...inputProps}/>
     );
 
-    var rippleStyle = this.mergeStyles({
-        height: '200%',
-        width: '200%',
-        top: '-12',
-        left: '-12'
-    }, this.props.rippleStyle);
-
     var touchRipple = (
       <TouchRipple
         ref="touchRipple"
@@ -261,7 +269,7 @@ var EnhancedSwitch = React.createClass({
     );
 
     return (
-      <div style={styles}>
+      <div ref="root" style={this.mergeAndPrefix(styles.root, this.props.style)}>
           {inputElement}
           {elementsInOrder}
       </div>
diff --git a/src/enhanced-textarea.jsx b/src/enhanced-textarea.jsx
index 2072ce885af78d..dbfc4138b54289 100644
--- a/src/enhanced-textarea.jsx
+++ b/src/enhanced-textarea.jsx
@@ -29,6 +29,19 @@ var EnhancedTextarea = React.createClass({
     this._syncHeightWithShadow();
   },
 
+  getStyles: function() {
+    var styles = {
+      root: {
+        width: '100%',
+        resize: 'none',
+        overflow: 'hidden',
+        font: 'inherit',
+        padding: 0,
+      }
+    };
+    return styles;
+  },
+
   render: function() {
 
     var {
@@ -41,6 +54,8 @@ var EnhancedTextarea = React.createClass({
       ...other,
     } = this.props;
 
+    var styles = this.getStyles().root;
+
     var textAreaStyles = {
       width: '100%',
       resize: 'none',
@@ -49,7 +64,7 @@ var EnhancedTextarea = React.createClass({
       padding: 0,
     };
 
-    var inputStyles = this.mergeAndPrefix(textAreaStyles,{
+    var inputStyles = this.mergeAndPrefix(styles,{
       height: this.state.height + 'px',
     });
 
diff --git a/src/flat-button.jsx b/src/flat-button.jsx
index f0e39eaca5455e..d9370179e31767 100644
--- a/src/flat-button.jsx
+++ b/src/flat-button.jsx
@@ -37,54 +37,6 @@ var FlatButton = React.createClass({
     };
   },
 
-  /** Styles */
-
-  _main: function() {
-
-    var style = {
-      transition: Transitions.easeOut(),
-      fontSize: Typography.fontStyleButtonFontSize,
-      letterSpacing: 0,
-      textTransform: 'uppercase',
-      fontWeight: Typography.fontWeightMedium, 
-      borderRadius: 2,
-      userSelect: 'none',
-      position: 'relative',
-      overflow: 'hidden',
-      backgroundColor: this.getTheme().color,
-      lineHeight: this.getThemeButton().height + 'px',
-      minWidth: this.getThemeButton().minWidth,
-      padding: 0, 
-      margin: 0,
-
-      //This is need so that ripples do not bleed past border radius.
-      //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
-      transform: 'translate3d(0, 0, 0)',
-
-      color:  this.props.disabled ? this.getTheme().disabledTextColor :
-              this.props.primary ? this.getTheme().primaryTextColor :
-              this.props.secondary ? this.getTheme().secondaryTextColor :
-              this.getTheme().textColor,
-    };
-
-    if (this.state.hovered && !this.props.disabled) {
-      style.backgroundColor = ColorManipulator.fade(ColorManipulator.lighten(style.color, 0.4), 0.15);
-    }  
-
-    return this.mergeAndPrefix(style);
-  },
-
-  _label: function() {
-    var style = {
-      position: 'relative',
-      padding: '0px ' + this.context.theme.spacing.desktopGutterLess + 'px',
-    };
-    
-    if (this.props.labelStyle) style = this.mergeAndPrefix(style, this.props.labelStyle);
-
-    return style;
-  },
-
   getThemeButton: function() {
     return this.context.theme.component.button;
   },
@@ -93,6 +45,42 @@ var FlatButton = React.createClass({
     return this.context.theme.component.flatButton;
   },
 
+  getStyles: function() {
+    var styles = {
+      root: {
+        transition: Transitions.easeOut(),
+        fontSize: Typography.fontStyleButtonFontSize,
+        letterSpacing: 0,
+        textTransform: 'uppercase',
+        fontWeight: Typography.fontWeightMedium, 
+        borderRadius: 2,
+        userSelect: 'none',
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: this.getTheme().color,
+        lineHeight: this.getThemeButton().height + 'px',
+        minWidth: this.getThemeButton().minWidth,
+        padding: 0, 
+        margin: 0,
+        //This is need so that ripples do not bleed past border radius.
+        //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
+        transform: 'translate3d(0, 0, 0)',
+      },
+      label: {
+        position: 'relative',
+        padding: '0px ' + this.context.theme.spacing.desktopGutterLess + 'px',
+      }
+    };
+    return styles;
+  },
+
+  _getColor: function(){
+    return  this.props.disabled ? this.getTheme().disabledTextColor :
+            this.props.primary ? this.getTheme().primaryTextColor :
+            this.props.secondary ? this.getTheme().secondaryTextColor :
+            this.getTheme().textColor;
+  },
+
   render: function() {
 
     var {
@@ -104,15 +92,33 @@ var FlatButton = React.createClass({
         ...other
       } = this.props;
 
+    var styles = this.getStyles();
+
+    styles.root.color = this._getColor();
+
+    styles.rootWhenHovered = {
+        backgroundColor: ColorManipulator.fade(ColorManipulator.lighten(styles.root.color, 0.4), 0.15)
+    };
+
     var labelElement;
-    if (label) labelElement = <span style={this._label()}>{label}</span>;
+    if (label) {
+      labelElement = (
+        <span style={this.mergeAndPrefix(styles.label, this.props.labelStyle)}>
+          {label}
+        </span>
+      );
+    };
     
-    var rippleColor = ColorManipulator.fade(this._main().color, 0.8);
+    var rippleColor = ColorManipulator.fade(styles.root.color, 0.8);
 
     return (
       <EnhancedButton {...other}
         ref="enhancedButton"
-        style={this._main()}
+        style={this.mergeAndPrefix(
+          styles.root,
+          (this.state.hovered && !this.props.disabled) && styles.rootWhenHovered,
+          this.props.style
+        )}
         onMouseOver={this._handleMouseOver} 
         onMouseOut={this._handleMouseOut} 
         focusRippleColor={rippleColor}
@@ -137,7 +143,7 @@ var FlatButton = React.createClass({
   _handleKeyboardFocus: function(e, keyboardFocused) {
 
     if (keyboardFocused && !this.props.disabled) {
-      this.getDOMNode().style.backgroundColor = ColorManipulator.fade(ColorManipulator.lighten(this._main().color, 0.4), 0.15);
+      this.getDOMNode().style.backgroundColor = ColorManipulator.fade(ColorManipulator.lighten(this.getStyles().root.color, 0.4), 0.15);
     } else {
       this.getDOMNode().style.backgroundColor = 'transparent';
     }
diff --git a/src/floating-action-button.jsx b/src/floating-action-button.jsx
index 617d1f15ba9912..7a2e29a051b289 100644
--- a/src/floating-action-button.jsx
+++ b/src/floating-action-button.jsx
@@ -67,79 +67,67 @@ var RaisedButton = React.createClass({
     }
   },
 
-
-  /** Styles */
-
   _getBackgroundColor: function() {
     return  this.props.disabled ? this.getTheme().disabledColor :
             this.props.secondary ? this.getTheme().secondaryColor :
             this.getTheme().color; 
   },
 
-  _main: function() {
-    return this.mergeAndPrefix({
-      transition: Transitions.easeOut(),
-      display: 'inline-block',
-    }); 
-  },
 
-  _icon: function() {
-    var style = {
-      lineHeight: this.getTheme().buttonSize + 'px',
-      fill: this.getTheme().iconColor,
-      color:  this.props.disabled ? this.getTheme().disabledTextColor :
-              this.props.secondary ? this.getTheme().secondaryIconColor :
-              this.getTheme().iconColor,
-    };
-
-    if (this.props.mini) style.lineHeight = this.getTheme().miniSize + 'px';
-    if (this.props.iconStyle) style = this.mergeAndPrefix(style, this.props.iconStyle);
-
-    return style;
-  },
-
-  _overlay: function() {
-    var style = {
-      transition: Transitions.easeOut(),
-      top: 0,
-    };
-
-    if (this.state.hovered && !this.props.disabled) {
-      style.backgroundColor = ColorManipulator.fade(this._icon().color, 0.4);
-    }
-
-    return style;
+  getTheme: function() {
+    return this.context.theme.component.floatingActionButton;
   },
 
-  _container: function() {
-    var style = {
-      transition: Transitions.easeOut(),
-      position: 'relative',
-      height: this.getTheme().buttonSize,
-      width: this.getTheme().buttonSize,
-      padding: 0,
-      overflow: 'hidden',
-      backgroundColor: this._getBackgroundColor(),
-      borderRadius: '50%',
-
-      //This is need so that ripples do not bleed
-      //past border radius.
-      //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
-      transform: 'translate3d(0, 0, 0)',
-    }; 
-
-    if (this.props.mini) {
-      style = this.mergeAndPrefix(style, {
+  _getIconColor: function() {
+    return  this.props.disabled ? this.getTheme().disabledTextColor :
+            this.props.secondary ? this.getTheme().secondaryIconColor :
+            this.getTheme().iconColor;
+  },
+
+  getStyles: function() {
+    var styles = {
+      root: {
+        transition: Transitions.easeOut(),
+        display: 'inline-block'
+      },
+      container: {
+        transition: Transitions.easeOut(),
+        position: 'relative',
+        height: this.getTheme().buttonSize,
+        width: this.getTheme().buttonSize,
+        padding: 0,
+        overflow: 'hidden',
+        backgroundColor: this._getBackgroundColor(),
+        borderRadius: '50%',
+        //This is need so that ripples do not bleed
+        //past border radius.
+        //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
+        transform: 'translate3d(0, 0, 0)'
+      },
+      icon: {
+        lineHeight: this.getTheme().buttonSize + 'px',
+        fill: this.getTheme().iconColor,
+        color: this._getIconColor()
+      },
+      overlay: {
+        transition: Transitions.easeOut(),
+        top: 0
+      },
+      containerWhenMini: {
         height: this.getTheme().miniSize,
-        width: this.getTheme().miniSize,
-      });
-    }
-
-    return style;
-  },
-
-  getTheme: function() {
-    return this.context.theme.component.floatingActionButton;
+        width: this.getTheme().miniSize
+      },
+      iconWhenMini: {
+        lineHeight: this.getTheme().miniSize + 'px'
+      },
+      overlayWhenHovered: {
+        backgroundColor: ColorManipulator.fade(this._getIconColor(), 0.4)
+      },
+      inner: {
+        transition: Transitions.easeOut()
+      }
+    };
+    return styles;
   },
 
   render: function() {
@@ -149,23 +137,34 @@ var RaisedButton = React.createClass({
       secondary,
       ...other } = this.props;
 
+    var styles = this.getStyles();
+
     var icon;
-    if (this.props.iconClassName) icon = <FontIcon className={this.props.iconClassName} style={this._icon()}/>
+    if (this.props.iconClassName) {
+      icon = 
+        <FontIcon 
+          className={this.props.iconClassName} 
+          style={this.mergeAndPrefix(
+            styles.icon,
+            this.props.mini && styles.iconWhenMini)}/>
+    }
 
-    var rippleColor = this._icon().color;
+    var rippleColor = styles.icon.color;
 
-    // TODO: Pass innerStyle prop to Paper when it is created during it's refactoring.
     return (
       <Paper
-        style={this._main()}
+        style={this.mergeAndPrefix(styles.root, this.props.style)}
         innerClassName={this.props.innerClassName}
-        innerStyle={{transition: Transitions.easeOut()}}
+        innerStyle={this.mergeAndPrefix(styles.inner, this.props.innerStyle)}
         zDepth={this.state.zDepth}
         circle={true}>
 
         <EnhancedButton {...other}
           ref="container"
-          style={this._container()}
+          style={this.mergeAndPrefix(
+            styles.container, 
+            this.props.mini && styles.containerWhenMini
+          )}
           onMouseDown={this._handleMouseDown}
           onMouseUp={this._handleMouseUp}
           onMouseOut={this._handleMouseOut}
@@ -175,9 +174,14 @@ var RaisedButton = React.createClass({
           focusRippleColor={rippleColor}
           touchRippleColor={rippleColor}
           onKeyboardFocus={this._handleKeyboardFocus}>
-            <div ref="overlay" style={this._overlay()} >
-              {icon}
-              {this.props.children}
+            <div 
+              ref="overlay" 
+              style={this.mergeAndPrefix(
+                styles.overlay,
+                (this.state.hovered && !this.props.disabled) && styles.overlayWhenHovered
+              )}>
+                {icon}
+                {this.props.children}
             </div>
         </EnhancedButton>
       </Paper>
@@ -220,7 +224,7 @@ var RaisedButton = React.createClass({
   _handleKeyboardFocus: function(e, keyboardFocused) {
     if (keyboardFocused && !this.props.disabled) {
       this.setState({ zDepth: this.state.initialZDepth + 1 });
-      this.refs.overlay.getDOMNode().style.backgroundColor = ColorManipulator.fade(this._icon().color, 0.4);
+      this.refs.overlay.getDOMNode().style.backgroundColor = ColorManipulator.fade(this.getStyles().icon.color, 0.4);
     } else if (!this.state.hovered) {
       this.setState({ zDepth: this.state.initialZDepth });
       this.refs.overlay.getDOMNode().style.backgroundColor = 'transparent';
diff --git a/src/font-icon.jsx b/src/font-icon.jsx
index 7a8db2d1e2496e..5bdc94a77dd323 100644
--- a/src/font-icon.jsx
+++ b/src/font-icon.jsx
@@ -20,31 +20,24 @@ var FontIcon = React.createClass({
     };
   },
 
-  /** Styles */
-  _main: function() {
-    var style = this.mergeAndPrefix({
+  getTheme: function() {
+    return this.context.theme.palette;
+  },
+
+  getStyles: function() {
+    var styles = {
       position: 'relative',
       fontSize: Spacing.iconSize + 'px',
       display: 'inline-block',
-      userSelect: 'none'
-    });
-
-    if (this.state.isHovered && this.props.hoverStyle) {
-      style = this.mergeAndPrefix(style, this.props.hoverStyle);
-    }
-    if (!style.color && !this.props.className) {
-      style.color = this.getTheme().textColor;
+      userSelect: 'none'  
+    };
+    if (!styles.color && !this.props.className) {
+      styles.color = this.getTheme().textColor;
     }
-    
-    return this.mergeAndPrefix(style);
-  },
-
-  getTheme: function() {
-    return this.context.theme.palette;
+    return styles;
   },
 
   render: function() {
-
     var {
       style,
       hoverStyle,
@@ -55,7 +48,10 @@ var FontIcon = React.createClass({
 
     return (
       <span {...other} 
-        style={this._main()} 
+        style={this.mergeAndPrefix(
+          this.getStyles(),
+          this.props.style,
+          this.state.isHovered && this.props.hoverStyle)} 
         onMouseOver={this._onMouseOver} 
         onMouseOut={this._onMouseOut}/>
     );
diff --git a/src/icon-button.jsx b/src/icon-button.jsx
index 67d50d7c277e74..a5c2f9a23434d1 100644
--- a/src/icon-button.jsx
+++ b/src/icon-button.jsx
@@ -45,73 +45,6 @@ var IconButton = React.createClass({
     }
   },
 
-  /** Styles */
-  _main: function() {
-    var style = {
-      height: 48,
-      width: 48,
-      position: 'relative',
-      boxSizing: 'border-box',
-      transition: Transitions.easeOut(),
-      padding: (this.getSpacing().iconSize / 2),
-      width: this.getSpacing().iconSize*2,
-      height: this.getSpacing().iconSize*2,
-    };
-
-    if (this.props.disabled) {
-      style = this.mergeAndPrefix(style, {
-        color: this.getDisabledColor(),
-        fill: this.getDisabledColor(),
-      });
-    }
-
-    return this.mergeAndPrefix(style);
-  },
-
-  _tooltip: function() {
-    return {
-      boxSizing: 'border-box',
-      marginTop: this.context.theme.component.button.iconButtonSize + 4,
-    };
-  },
-
-  _icon: function() {
-    var style = {
-        color: this.getTheme().textColor,
-        fill: this.getTheme().textColor,
-    };
-
-    if (this.props.disabled) {
-      style = {
-        color: this.getDisabledColor(),
-        fill: this.getDisabledColor(),
-      };
-    }
-
-    if (this.props.iconStyle) {
-      style = this.mergeAndPrefix(style, this.props.iconStyle);
-    }
-
-    return style;
-  },
-
-  /**
-   * If the user has children icon and is disabled, we have no way of knowing 
-   * how to override children styles to apply disabled styles. Instead, we 
-   * add a color overlay with disabled styles above the children. This can be 
-   * removed by the user if he/she has his/her own custom disabled styles.
-   */
-  _overlay: function() {
-    return {
-      position: 'relative',
-      top: 0,
-      width: '100%',
-      height: '100%',
-      background: this.getDisabledColor(),
-
-    }
-  },
-
   getTheme: function() {
     return this.context.theme.palette;
   },
@@ -124,6 +57,45 @@ var IconButton = React.createClass({
     return this.context.theme.palette.disabledColor;
   },
 
+  getStyles: function() {
+    var styles = {
+      root: {
+        height: 48,
+        width: 48,
+        position: 'relative',
+        boxSizing: 'border-box',
+        transition: Transitions.easeOut(),
+        padding: (this.getSpacing().iconSize / 2),
+        width: this.getSpacing().iconSize*2,
+        height: this.getSpacing().iconSize*2
+      },
+      tooltip: {
+        boxSizing: 'border-box',
+        marginTop: this.context.theme.component.button.iconButtonSize + 4
+      },
+      icon: {
+        color: this.getTheme().textColor,
+        fill: this.getTheme().textColor
+      },
+      overlay: {
+        position: 'relative',
+        top: 0,
+        width: '100%',
+        height: '100%',
+        background: this.getDisabledColor()
+      },
+      rootWhenDisabled: {
+        color: this.getDisabledColor(),
+        fill: this.getDisabledColor()
+      },
+      iconWhenDisabled: {
+        color: this.getDisabledColor(),
+        fill: this.getDisabledColor()
+      }
+    };
+    return styles;
+  },
+
   render: function() {
     var {
       tooltip,
@@ -132,6 +104,8 @@ var IconButton = React.createClass({
     var tooltip;
     var fonticon;
 
+    var styles = this.getStyles();
+
     if (this.props.tooltip) {
       tooltip = (
         <Tooltip
@@ -139,7 +113,7 @@ var IconButton = React.createClass({
           label={tooltip}
           show={this.state.tooltipShown}
           touch={touch}
-          style={this._tooltip()}/>
+          style={this.mergeAndPrefix(styles.tooltip)}/>
       );
     }
 
@@ -147,7 +121,11 @@ var IconButton = React.createClass({
       fonticon = (
         <FontIcon 
           className={this.props.iconClassName} 
-          style={this._icon()}/>
+          style={this.mergeAndPrefix(
+            styles.icon, 
+            this.props.disabled && styles.iconWhenDisabled,
+            this.props.iconStyle
+          )}/>
       );
     }
 
@@ -164,7 +142,7 @@ var IconButton = React.createClass({
       <EnhancedButton {...other}
         ref="button"
         centerRipple={true}
-        style={this._main()}
+        style={this.mergeAndPrefix(styles.root, this.props.style)}
         onBlur={this._handleBlur}
         onFocus={this._handleFocus}
         onMouseOut={this._handleMouseOut}
diff --git a/src/left-nav.jsx b/src/left-nav.jsx
index 122420b6fdf4ce..4d75ceb84d6fb1 100644
--- a/src/left-nav.jsx
+++ b/src/left-nav.jsx
@@ -68,86 +68,81 @@ var LeftNav = React.createClass({
     return this;
   },
 
-  /** Styles */
-  _main: function() {
-    var style = {
-      height: '100%',
-      width: this.getTheme().width,
-      position: 'fixed',
-      zIndex: 10,
-      left: 0,
-      top: 0,
-      transition: Transitions.easeOut(),
-      backgroundColor: this.getTheme().color,
-      overflow: 'hidden'
-    };
-
-    var x = ((-1 * this.getTheme().width) - 10) + 'px';
-    if (!this.state.open) style.transform = 'translate3d(' + x + ', 0, 0)';
-
-    return this.mergeAndPrefix(style);
-  },
-  
-  _menu: function() {
-    return {
-      overflowY: 'auto',
-      overflowX: 'hidden',
-      height: '100%'
-    };
+  getThemePalette: function() {
+    return this.context.theme.palette;
   },
 
-  _menuItem: function() {
-    return {
-      height: this.context.theme.spacing.desktopLeftNavMenuItemHeight,
-      lineDeight: this.context.theme.spacing.desktopLeftNavMenuItemHeight,
-    };
+  getTheme: function() {
+    return this.context.theme.component.leftNav;
   },
 
-  _menuItemLink: function() {
-    return this.mergeAndPrefix({
+  getStyles: function() {
+    var x = ((-1 * this.getTheme().width) - 10) + 'px';
+    var styles = {
+      root: {
+        height: '100%',
+        width: this.getTheme().width,
+        position: 'fixed',
+        zIndex: 10,
+        left: 0,
+        top: 0,
+        transition: Transitions.easeOut(),
+        backgroundColor: this.getTheme().color,
+        overflow: 'hidden'
+      },
+      menu: {
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        height: '100%'
+      },
+      menuItem: {
+        height: this.context.theme.spacing.desktopLeftNavMenuItemHeight,
+        lineDeight: this.context.theme.spacing.desktopLeftNavMenuItemHeight
+      },
+      rootWhenNotOpen: {
+        transform: 'translate3d(' + x + ', 0, 0)'
+      }
+    };
+    styles.menuItemLink = this.mergeAndPrefix(styles.menuItem, {
       display: 'block',
       textDecoration: 'none',
-      color: this.getThemePalette().textColor,
-    }, this._menuItem());
-  },
-  
-  _menuItemSubheader: function() {
-    return this.mergeAndPrefix({
+      color: this.getThemePalette().textColor
+    });
+    styles.menuItemSubheader = this.mergeAndPrefix(styles.menuItem, {
       overflow: 'hidden'
-    }, this._menuItem());
-  },
+    });
 
-  getThemePalette: function() {
-    return this.context.theme.palette;
-  },
-
-  getTheme: function() {
-    return this.context.theme.component.leftNav;
+    return styles;
   },
 
   render: function() {
     var selectedIndex = this.props.selectedIndex;
     var overlay;
 
+    var styles = this.getStyles();
     if (!this.props.docked) overlay = <Overlay show={this.state.open} onTouchTap={this._onOverlayTouchTap} />;
 
+
     return (
       <div className={this.props.className}>
         {overlay}
         <Paper
           ref="clickAwayableElement"
-          style={this._main()}
           zDepth={2}
-          rounded={false}>
+          rounded={false}
+          style={this.mergeAndPrefix(
+            styles.root, 
+            !this.state.open && styles.rootWhenNotOpen,
+            this.props.style)}>
             {this.props.header}
             <Menu
               ref="menuItems"
-              style={this._menu()}
+              style={this.mergeAndPrefix(styles.menu)}
               zDepth={0}
               menuItems={this.props.menuItems}
-              menuItemStyle={this._menuItem()} 
-              menuItemStyleLink={this._menuItemLink()}
-              menuItemStyleSubheader={this._menuItemSubheader()}
+              menuItemStyle={this.mergeAndPrefix(styles.menuItem)} 
+              menuItemStyleLink={this.mergeAndPrefix(styles.menuItemLink)}
+              menuItemStyleSubheader={this.mergeAndPrefix(styles.menuItemSubheader)}
               selectedIndex={selectedIndex}
               onItemClick={this._onMenuItemClick} />
         </Paper>
diff --git a/src/menu/link-menu-item.jsx b/src/menu/link-menu-item.jsx
index 242cd3a6d504b0..da645a2a7e1687 100644
--- a/src/menu/link-menu-item.jsx
+++ b/src/menu/link-menu-item.jsx
@@ -30,27 +30,34 @@ var LinkMenuItem = React.createClass({
     }
   },
 
-  /** Styles */
-  _main: function() { // Same as MenuItem.
-    var style = this.mergeAndPrefix({
-      userSelect: 'none',
-      cursor: 'pointer',
-      display: 'block',
-      lineHeight: this.getTheme().height + 'px',
-      paddingLeft: this.getTheme().padding,
-      paddingRight: this.getTheme().padding,
-    });
-
-    if (this.state.hovered && !this.props.disabled) style.backgroundColor = this.getTheme().hoverColor;
-    if (this.props.selected) style.color = this.getTheme().selectedTextColor;
-
-    return this.mergeAndPrefix(style);
-  },
-
   getTheme: function() {
     return this.context.theme.component.menuItem;
   },
 
+  getStyles: function() {
+    var style = {
+      root: {
+        userSelect: 'none',
+        cursor: 'pointer',
+        display: 'block',
+        lineHeight: this.getTheme().height + 'px',
+        paddingLeft: this.getTheme().padding,
+        paddingRight: this.getTheme().padding
+      },
+      rootWhenHovered: {
+        backgroundColor: this.getTheme().hoverColor
+      },
+      rootWhenSelected: {
+        color: this.getTheme().selectedTextColor
+      },
+      rootWhenDisabled: {
+        cursor: 'default',
+        color: this.context.theme.palette.disabledColor
+      }
+    };
+    return style;
+  },
+
   render: function() {
     var onClickHandler = (this.props.disabled) ? this._stopLink : undefined;
     // Prevent context menu 'Open In New Tab/Window'
@@ -58,17 +65,21 @@ var LinkMenuItem = React.createClass({
     var link = {};
     link[linkAttribute] = this.props.payload
 
-    var styles = this._main(); 
-    if (this.props.disabled) {
-      styles.cursor = 'default';
-      styles.color = this.context.theme.palette.disabledColor;
-    }
+    var styles = this.getStyles();
+
+    var linkStyles = 
+      this.mergeAndPrefix(
+        styles.root, 
+        this.props.selected && styles.rootWhenSelected,
+        (this.state.hovered && !this.props.disabled) && styles.rootWhenHovered,
+        this.props.style,
+        this.props.disabled && styles.rootWhenDisabled);
 
     return (
       <a 
         key={this.props.index} 
         target={this.props.target} 
-        style={styles} {...link} 
+        style={linkStyles} {...link} 
         className={this.props.className} 
         onClick={onClickHandler}
         onMouseOver={this._handleMouseOver}
diff --git a/src/menu/menu-item.jsx b/src/menu/menu-item.jsx
index b031b0e6b22029..bc9eec4d92aae0 100644
--- a/src/menu/menu-item.jsx
+++ b/src/menu/menu-item.jsx
@@ -52,79 +52,6 @@ var MenuItem = React.createClass({
     }
   },
 
-  /** Styles */
-  _main: function() {
-    var style = this.mergeAndPrefix({
-      userSelect: 'none',
-      cursor: 'pointer',
-      lineHeight: this.getTheme().height + 'px',
-      paddingLeft: this.getTheme().padding,
-      paddingRight: this.getTheme().padding,
-      color: this.context.theme.palette.textColor
-    });
-
-    if (this.state.hovered && !this.props.disabled) style.backgroundColor = this.getTheme().hoverColor;
-    if (this.props.selected) style.color = this.getTheme().selectedTextColor;
-
-    if (this.props.disabled) {
-      style.cursor = 'default';
-      style.color = this.context.theme.palette.disabledColor;
-    }
-
-    return style;
-  },
-
-  _number: function() {
-    return {
-      float: 'right',
-      width: 24,
-      textAlign: 'center'
-    }
-  },
-
-  _attribute: function() {
-    return {
-      float: 'right'
-    }
-  },
-
-  _iconRight: function() {
-    return this.mergeStyles({
-      lineHeight: this.getTheme().height + 'px',
-      float: 'right'
-    }, this.props.iconRightStyle);
-  },
-
-  _icon: function () {
-    return this.mergeStyles({
-      float: 'left',
-      lineHeight: this.getTheme().height + 'px',
-      marginRight: this.getSpacing().desktopGutter
-    }, this.props.iconStyle);
-  },
-
-  _data: function() {
-    return {
-      display: 'block',
-      paddingLeft: this.getSpacing().desktopGutter * 2,
-      lineHeight: this.getTheme().dataHeight + 'px',
-      height: this.getTheme().dataHeight + 'px',
-      verticalAlign: 'top',
-      top: -12,
-      position: 'relative',
-      fontWeight: 300,
-      color: this.context.theme.palette.textColor
-    }
-  },
-
-  _toggle: function() {
-    return {
-      marginTop: ((this.getTheme().height - this.context.theme.component.radioButton.size) / 2),
-      float: 'right',
-      width: 42,
-    }
-  },
-
   getTheme: function() {
     return this.context.theme.component.menuItem;
   },
@@ -133,6 +60,63 @@ var MenuItem = React.createClass({
     return this.context.theme.spacing;
   },
 
+  getStyles: function() {
+    var styles = {
+      root: {
+        userSelect: 'none',
+        cursor: 'pointer',
+        lineHeight: this.getTheme().height + 'px',
+        paddingLeft: this.getTheme().padding,
+        paddingRight: this.getTheme().padding,
+        color: this.context.theme.palette.textColor
+      },
+      number: {
+        float: 'right',
+        width: 24,
+        textAlign: 'center'
+      },
+      attribute: {
+        float: 'right'
+      },
+      iconRight: {
+        lineHeight: this.getTheme().height + 'px',
+        float: 'right'
+      },
+      icon: {
+        float: 'left',
+        lineHeight: this.getTheme().height + 'px',
+        marginRight: this.getSpacing().desktopGutter
+      },
+      data: {
+        display: 'block',
+        paddingLeft: this.getSpacing().desktopGutter * 2,
+        lineHeight: this.getTheme().dataHeight + 'px',
+        height: this.getTheme().dataHeight + 'px',
+        verticalAlign: 'top',
+        top: -12,
+        position: 'relative',
+        fontWeight: 300,
+        color: this.context.theme.palette.textColor
+      },
+      toggle: {
+        marginTop: ((this.getTheme().height - this.context.theme.component.radioButton.size) / 2),
+        float: 'right',
+        width: 42
+      },
+      rootWhenHovered: {
+        backgroundColor: this.getTheme().hoverColor
+      },
+      rootWhenSelected: {
+        color: this.getTheme().selectedTextColor
+      },
+      rootWhenDisabled: {
+        cursor: 'default',
+        color: this.context.theme.palette.disabledColor
+      }
+    };
+    return styles;
+  },
+
   render: function() {
     var icon;
     var data;
@@ -141,11 +125,13 @@ var MenuItem = React.createClass({
     var number;
     var toggle;
 
-    if (this.props.iconClassName) icon = <FontIcon style={this._icon()} className={this.props.iconClassName} />;
-    if (this.props.iconRightClassName) iconRight = <FontIcon style={this._iconRight()} className={this.props.iconRightClassName} />;
-    if (this.props.data) data = <span style={this._data()}>{this.props.data}</span>;
-    if (this.props.number !== undefined) number = <span style={this._number()}>{this.props.number}</span>;
-    if (this.props.attribute !== undefined) attribute = <span style={this._style()}>{this.props.attribute}</span>;
+    var styles = this.getStyles();
+
+    if (this.props.iconClassName) icon = <FontIcon style={this.mergeAndPrefix(styles.icon, this.props.iconStyle)} className={this.props.iconClassName} />;
+    if (this.props.iconRightClassName) iconRight = <FontIcon style={this.mergeAndPrefix(styles.iconRight, this.props.iconRightStyle)} className={this.props.iconRightClassName} />;
+    if (this.props.data) data = <span style={this.mergeAndPrefix(styles.data)}>{this.props.data}</span>;
+    if (this.props.number !== undefined) number = <span style={this.mergeAndPrefix(styles.number)}>{this.props.number}</span>;
+    if (this.props.attribute !== undefined) attribute = <span style={this.mergeAndPrefix(styles.style)}>{this.props.attribute}</span>;
     
     if (this.props.toggle) {
       var {
@@ -159,18 +145,23 @@ var MenuItem = React.createClass({
         style,
         ...other
       } = this.props;
-      toggle = <Toggle {...other} onToggle={this._handleToggle} style={this._toggle()}/>;
+      toggle = <Toggle {...other} onToggle={this._handleToggle} style={styles.toggle}/>;
     }
 
     return (
       <div
         key={this.props.index}
-        style={this._main()}
         className={this.props.className} 
         onTouchTap={this._handleTouchTap}
         onClick={this._handleOnClick}
         onMouseOver={this._handleMouseOver}
-        onMouseOut={this._handleMouseOut}>
+        onMouseOut={this._handleMouseOut}
+        style={this.mergeAndPrefix(
+          styles.root, 
+          this.props.selected && styles.rootWhenSelected,
+          (this.state.hovered && !this.props.disabled) && styles.rootWhenHovered,
+          this.props.style,
+          this.props.disabled && styles.rootWhenDisabled)}>
 
         {icon}
         {this.props.children}
diff --git a/src/menu/menu.jsx b/src/menu/menu.jsx
index 2a4e3a32a6c6d5..7f8c89899f8646 100644
--- a/src/menu/menu.jsx
+++ b/src/menu/menu.jsx
@@ -59,23 +59,23 @@ var NestedMenuItem = React.createClass({
   },
 
   render: function() {
-    var styles = this.mergeStyles({
-      position: 'relative',
-    });
+    var styles = this.mergeAndPrefix({
+      position: 'relative'
+    }, this.props.style);
 
     var iconCustomArrowDropRight = {
       marginRight: this.getSpacing().desktopGutterMini * -1,
-      color: this.context.theme.component.dropDownMenu.iconColor
-    }
+      color: this.context.theme.component.dropDownMenu.accentColor
+    };
 
     var {
       index,
       menuItemStyle,
-      ...other,
+      ...other
     } = this.props;
 
     return (
-      <div style={styles} onMouseEnter={this._openNestedMenu} onMouseLeave={this._closeNestedMenu}>
+      <div ref="root" style={styles} onMouseEnter={this._openNestedMenu} onMouseLeave={this._closeNestedMenu}>
         <MenuItem 
           index={index}
           style={menuItemStyle}
@@ -99,7 +99,7 @@ var NestedMenuItem = React.createClass({
 
   _positionNestedMenu: function() {
     var el = this.getDOMNode();
-    var nestedMenu = this.refs.nestedMenu.getDOMNode();
+    var nestedMenu = React.findDOMNode(this.refs.nestedMenu);
     nestedMenu.style.left = el.offsetWidth + 'px';
   },
   
@@ -191,49 +191,6 @@ var Menu = React.createClass({
     if (this.props.visible !== prevProps.visible) this._renderVisibility();
   },
 
-
-  /** Styles */
-  _hideable: function() {
-    return {
-      opacity: (this.props.visible) ? 1 : 0,
-      position: 'absolute',
-      top: 0,
-      zIndex: 1,
-    }
-  },
-
-  // Main Style
-  _main: function() {
-    return this.mergeAndPrefix({
-      backgroundColor: this.getTheme().backgroundColor,
-      transition: Transitions.easeOut(null, 'height'),
-    });
-  },
-
-  _innerPaper: function() {
-    var style = {
-      paddingTop: this.getSpacing().desktopGutterMini,
-      paddingBottom: this.getSpacing().desktopGutterMini,
-      backgroundColor: this.getTheme().containerBackgroundColor,
-    }
-
-    if (this.props.hideable) {
-     this.mergeStyles(style, {
-      overflow: 'hidden',
-      padding: 0,
-      });
-    }
-
-    return style;
-  },
-
-  _subheader: function() {
-    return this.mergeAndPrefix({
-      paddingLeft: this.context.theme.component.menuSubheader.padding,
-      paddingRight: this.context.theme.component.menuSubheader.padding,
-    }, this.props.menuItemStyleSubheader);
-  },
-
   getTheme: function() {
     return this.context.theme.component.menu
   },
@@ -242,13 +199,48 @@ var Menu = React.createClass({
     return this.context.theme.spacing;
   },
 
-  render: function() {
-    var styles = this._main();
-    if (this.props.hideable) styles = this.mergeStyles(styles, this._hideable());
+  getStyles: function() {
+    var styles = {
+      root: {
+        backgroundColor: this.getTheme().backgroundColor,
+        transition: Transitions.easeOut(null, 'height')
+      },
+      innerPaper: {
+        paddingTop: this.getSpacing().desktopGutterMini,
+        paddingBottom: this.getSpacing().desktopGutterMini,
+        backgroundColor: this.getTheme().containerBackgroundColor
+      },
+      subheader: {
+        paddingLeft: this.context.theme.component.menuSubheader.padding,
+        paddingRight: this.context.theme.component.menuSubheader.padding
+      },
+      hideable: {
+        opacity: (this.props.visible) ? 1 : 0,
+        position: 'absolute',
+        top: 0,
+        zIndex: 1
+      },
+      innerPaperWhenHideable: {
+        overflow: 'hidden'
+      }
+    };
+    return styles;
+  },
 
+  render: function() {
+    var styles = this.getStyles();
     return (
-      <Paper ref="paperContainer" zDepth={this.props.zDepth} style={styles} innerStyle={this._innerPaper()}>
-        {this._getChildren()}
+      <Paper 
+        ref="paperContainer" 
+        zDepth={this.props.zDepth} 
+        style={this.mergeAndPrefix(
+          styles.root,
+          this.props.hideable && styles.hideable,
+          this.props.style)} 
+        innerStyle={this.mergeAndPrefix(
+          styles.innerPaper,
+          this.props.hideable && styles.innerPaperWhenHideable)}>
+            {this._getChildren()}
       </Paper>
     );
   },
@@ -260,6 +252,8 @@ var Menu = React.createClass({
       isSelected,
       isDisabled;
 
+    var styles = this.getStyles();
+
     //This array is used to keep track of all nested menu refs
     this._nestedChildren = [];
 
@@ -300,7 +294,7 @@ var Menu = React.createClass({
               key={i}
               index={i}
               className={this.props.menuItemClassNameSubheader}
-              style={this._subheader()}
+              style={this.mergeAndPrefix(styles.subheader)}
               firstChild={i == 0}
               text={menuItem.text} />
           );
diff --git a/src/menu/subheader-menu-item.jsx b/src/menu/subheader-menu-item.jsx
index 2092fd0b9b1816..6ea9d168c87fb2 100644
--- a/src/menu/subheader-menu-item.jsx
+++ b/src/menu/subheader-menu-item.jsx
@@ -16,39 +16,6 @@ var SubheaderMenuItem = React.createClass({
       firstChild: React.PropTypes.bool,
       className: React.PropTypes.string,
   },
-  
-  /** Styles */
-  _main: function() {
-
-    var gutterMini = this.getSpacing().desktopGutterMini;
-    var subheaderHeight = this.getSpacing().desktopSubheaderHeight;
-
-    var style = {
-      boxSizing: 'border-box',
-      fontSize: '13px',
-      letterSpacing: 0,
-      fontWeight: Typography.fontWeightMedium,
-      color: Typography.textDarkBlack,
-      margin: 0,
-      height: subheaderHeight + gutterMini,
-      lineHeight: subheaderHeight + 'px',
-      color: this.getTheme().textColor,
-      borderTop: 'solid 1px ' + this.getTheme().borderColor,
-      paddingTop: gutterMini,
-      marginTop: gutterMini,
-    };
-
-    if (this.props.firstChild) {
-      style = this.mergeAndPrefix(style, {
-        height: subheaderHeight,
-        borderTop: 'none',
-        paddingTop: 0,
-        marginTop: 0,
-      });
-    }
-
-    return this.mergeAndPrefix(style);
-  },
 
   getTheme: function() {
     return this.context.theme.component.menuSubheader;
@@ -58,12 +25,44 @@ var SubheaderMenuItem = React.createClass({
     return this.context.theme.spacing;
   },
 
+  getStyles: function() {
+    var gutterMini = this.getSpacing().desktopGutterMini;
+    var subheaderHeight = this.getSpacing().desktopSubheaderHeight;
+    var styles = {
+      root: {
+        boxSizing: 'border-box',
+        fontSize: '13px',
+        letterSpacing: 0,
+        fontWeight: Typography.fontWeightMedium,
+        color: Typography.textDarkBlack,
+        margin: 0,
+        height: subheaderHeight + gutterMini,
+        lineHeight: subheaderHeight + 'px',
+        color: this.getTheme().textColor,
+        borderTop: 'solid 1px ' + this.getTheme().borderColor,
+        paddingTop: gutterMini,
+        marginTop: gutterMini
+      },
+      rootWhenFirstChild: {
+        height: subheaderHeight,
+        borderTop: 'none',
+        paddingTop: 0,
+        marginTop: 0        
+      }
+    };
+    return styles;
+  },
+
   render: function() {
     return (
         <div 
         	key={this.props.index} 
-        	style={this._main()}
-          className={this.props.className}>
+          className={this.props.className}
+          style={this.mergeAndPrefix(
+            this.getStyles().root,
+            this.props.firstChild && this.getStyles().rootWhenFirstChild,
+            this.props.style
+          )}>
         		{this.props.text}
         </div>
     );
diff --git a/src/mixins/click-awayable.js b/src/mixins/click-awayable.js
index b591684d14e02d..dd2b18b18e42fa 100644
--- a/src/mixins/click-awayable.js
+++ b/src/mixins/click-awayable.js
@@ -14,13 +14,22 @@ module.exports = {
   },
 
   _checkClickAway: function(e) {
-    var el = this.getDOMNode();
+    var el; 
+    if (this.refs.hasOwnProperty("root")) {
+      el = React.findDOMNode(this.refs.root);
+    } else {
+      var message = 'Please set your outermost component\'s ref to \'root\' ' + 
+                    'when using ClickAwayable.';
+      console.warn(message);
+      el = this.getDOMNode();
+    }
 
     // Check if the target is inside the current component
     if (this.isMounted() && 
       e.target != el &&
       !Dom.isDescendant(el, e.target) &&
       document.documentElement.contains(e.target)) {
+      
       if (this.componentClickAway) this.componentClickAway();
     }
   },
diff --git a/src/mixins/style-propable.js b/src/mixins/style-propable.js
index 0bf7202334246d..43a85585864277 100644
--- a/src/mixins/style-propable.js
+++ b/src/mixins/style-propable.js
@@ -1,5 +1,6 @@
 var React = require('react/addons');
 var AutoPrefix = require('../styles/auto-prefix');
+var Extend = require('../utils/extend');
 
 /**
  *	@params:
@@ -8,14 +9,35 @@ var AutoPrefix = require('../styles/auto-prefix');
  */
 module.exports = {
 
-  mergeStyles: function(styles, props) {
-    return React.addons.update(styles, {
-      $merge: props || this.props.style || {}
-    });
+  propTypes: {
+    style: React.PropTypes.object
   },
 
-  mergeAndPrefix: function(styles, props) {
-    return AutoPrefix.all(this.mergeStyles(styles, props));
-  }
-  
+  mergeStyles: function() {
+    var args = Array.prototype.slice.call(arguments, 0);
+    var base = args[0];
+    for (var i = 1; i < args.length; i++) {
+      if (args[i]) base = Extend(base, args[i]);
+    }
+    return base;
+  },
+
+
+  /** 
+   * m loops through all properties defined in the first argument, so overrides
+   * of undefined properties will not take place.
+   */
+  mergeAndPrefix: function() {
+    var args = Array.prototype.slice.call(arguments, 0);
+
+    var base = args[0];
+    for (var i = 1; i < args.length; i++) {
+      if (args[i]) base = Extend(base, args[i]);
+    }
+
+    return AutoPrefix.all(base);
+    // return function(args){
+    //   return AutoPrefix.all()
+    // }.bind()
+	},
 }
diff --git a/src/overlay.jsx b/src/overlay.jsx
index 88b454b5e9895a..331d474c8aaf3c 100644
--- a/src/overlay.jsx
+++ b/src/overlay.jsx
@@ -22,6 +22,31 @@ var Overlay = React.createClass({
     if (this.props.autoLockScrolling) (this.props.show) ? this._preventScrolling() : this._allowScrolling();
   },
 
+  getStyles: function() {
+    var styles = {
+      root: {
+        position: 'fixed',
+        height: '100%',
+        width: '100%',
+        zIndex: 9,
+        top: 0,
+        left: '-100%',
+        backgroundColor: Colors.transparent,
+        transition:
+          Transitions.easeOut('0ms', 'left', '400ms') + ',' +
+          Transitions.easeOut('400ms', 'backgroundColor')
+      },
+      rootWhenShown: {
+        left: '0',
+        backgroundColor: Colors.lightBlack,
+        transition:
+          Transitions.easeOut('0ms', 'left') + ',' +
+          Transitions.easeOut('400ms', 'backgroundColor')
+      }
+    };
+    return styles;
+  },
+
   render: function() {
 
     var {
@@ -30,30 +55,7 @@ var Overlay = React.createClass({
       ...other
     } = this.props;
 
-    var styles = {
-      position: 'fixed',
-      height: '100%',
-      width: '100%',
-      zIndex: 9,
-      top: 0,
-      left: '-100%',
-      backgroundColor: Colors.transparent,
-      transition:
-        Transitions.easeOut('0ms', 'left', '400ms') + ',' +
-        Transitions.easeOut('400ms', 'backgroundColor')
-    };
-
-    if (this.props.show) {
-      styles = this.mergeStyles(styles, {
-        left: 0,
-        backgroundColor: Colors.lightBlack,
-        transition:
-          Transitions.easeOut('0ms', 'left') + ',' +
-          Transitions.easeOut('400ms', 'backgroundColor')
-      });
-    }
-
-    styles = this.mergeAndPrefix(styles);
+    var styles = this.mergeAndPrefix(this.getStyles().root, this.props.style, this.props.show && this.getStyles().rootWhenShown)
 
     return (
       <div {...other} style={styles} />
diff --git a/src/paper.jsx b/src/paper.jsx
index 827a378dd9f39b..5e7c74fe33389a 100644
--- a/src/paper.jsx
+++ b/src/paper.jsx
@@ -26,39 +26,32 @@ var Paper = React.createClass({
     };
   },
 
-  /** Styles */
-  _main: function() {
-    return this.mergeAndPrefix({
-      backgroundColor: this.context.theme.component.paper.backgroundColor,
-      transition: Transitions.easeOut(),
-      boxSizing: 'border-box',
-      fontFamily: this.context.theme.contentFontFamily,
-      WebkitTapHighlightColor: 'rgba(0,0,0,0)', 
-      boxShadow: this.getZDepthShadows(this.props.zDepth).boxShadow,
-      borderRadius: this.props.circle ? '50%' : 
-                    this.props.rounded ? '2px' :
-                    '0px',
-    });
-  },
-
-  _inner: function() {
-    var style = {
-      width: '100%', 
-      height: '100%',
-      boxSizing: 'border-box',
-      fontFamily: this.context.theme.contentFontFamily,
-      WebkitTapHighlightColor: 'rgba(0,0,0,0)', 
-      boxShadow: this.getZDepthShadows(this.props.zDepth).bottomBoxShadow,
-      borderRadius: this.props.circle ? '50%' : 
-                    this.props.rounded ? '2px' :
-                    '0px',
+  getStyles: function() {
+    var styles = {
+      root: {
+        backgroundColor: this.context.theme.component.paper.backgroundColor,
+        transition: Transitions.easeOut(),
+        boxSizing: 'border-box',
+        fontFamily: this.context.theme.contentFontFamily,
+        WebkitTapHighlightColor: 'rgba(0,0,0,0)', 
+        boxShadow: this.getZDepthShadows(this.props.zDepth).boxShadow,
+        borderRadius: this.props.circle ? '50%' : 
+                      this.props.rounded ? '2px' :
+                      '0px'
+      },
+      inner: {
+        width: '100%', 
+        height: '100%',
+        boxSizing: 'border-box',
+        fontFamily: this.context.theme.contentFontFamily,
+        WebkitTapHighlightColor: 'rgba(0,0,0,0)', 
+        boxShadow: this.getZDepthShadows(this.props.zDepth).bottomBoxShadow,
+        borderRadius: this.props.circle ? '50%' : 
+                      this.props.rounded ? '2px' :
+                      '0px'       
+      }
     };
-
-    if (this.props.innerStyle) {
-      style = this.mergeAndPrefix(style, this.props.innerStyle);
-    }
-
-    return style;
+    return styles;
   },
 
   render: function() {
@@ -72,9 +65,11 @@ var Paper = React.createClass({
       zDepth,
       ...other } = this.props;
 
+    var styles = this.getStyles();
+
     return (
-      <div {...other} className={this.props.className} style={this._main()}>
-        <div ref="innerContainer" className={this.props.innerClassName} style={this._inner()}>
+      <div {...other} className={this.props.className} style={this.mergeAndPrefix(styles.root, this.props.style)}>
+        <div ref="innerContainer" className={this.props.innerClassName} style={this.mergeAndPrefix(styles.inner, this.props.innerStyle)}>
           {this.props.children}
         </div>
       </div>
diff --git a/src/radio-button.jsx b/src/radio-button.jsx
index d5670fbb2d049a..47a4b87945ab64 100644
--- a/src/radio-button.jsx
+++ b/src/radio-button.jsx
@@ -21,58 +21,67 @@ var RadioButton = React.createClass({
     return this.context.theme.component.radioButton;
   },
 
-  render: function() {
-
-    var {
-      onCheck,
-      ...other
-    } = this.props;
-
-    var iconStyles = {
-        height: this.getTheme().size,
-        width: this.getTheme().size
-    };
-    var targetStyles = {
-        transition: Transitions.easeOut(),
-        position: 'absolute',
-        opacity: 1,
-        transform: 'scale(1)',
-        fill: this.getTheme().borderColor
-    };
-    var fillStyles = {
-        position: 'absolute',
-        opacity: 1,
-        transform: 'scale(0)',
-        transformOrigin: '50% 50%',
-        transition: Transitions.easeOut(),
-        fill: this.getTheme().checkedColor
-    };
-
-    if (this.props.checked) {
-      targetStyles = this.mergeStyles(targetStyles, {
+  getStyles: function() {
+    var styles = {
+      icon: {
+          height: this.getTheme().size,
+          width: this.getTheme().size
+      },
+      target: {
+          transition: Transitions.easeOut(),
+          position: 'absolute',
+          opacity: 1,
+          transform: 'scale(1)',
+          fill: this.getTheme().borderColor
+      },
+      fill: {
+          position: 'absolute',
+          opacity: 1,
+          transform: 'scale(0)',
+          transformOrigin: '50% 50%',
+          transition: Transitions.easeOut(),
+          fill: this.getTheme().checkedColor
+      },
+      targetWhenChecked: {
         opacity: 0,
         transform: 'scale(0)'
-      });
-      fillStyles = this.mergeStyles(fillStyles, {
+      },
+      fillWhenChecked: {
         opacity: 1,
         transform: 'scale(1)'
-      });
-    }
+      },
+      targetWhenDisabled: {
+        fill: this.getTheme().disabledColor
+      },
+      fillWhenDisabled: {
+        fill: this.getTheme().disabledColor
+      },
+    };
+    return styles;
+  },
 
-    if (this.props.disabled) {
-      targetStyles.fill = this.getTheme().disabledColor;
-      fillStyles.fill = this.getTheme().disabledColor;
-    }
+  render: function() {
+    var {
+      onCheck,
+      ...other
+    } = this.props;
 
-    if (this.props.checked && this.props.disabled) {
-      targetStyles.opacity = 0.3;
-      fillStyles.opacity = 0.3;
-    }
+    var styles = this.getStyles();
 
     var radioButtonElement = (
       <div>
-          <RadioButtonOff style={targetStyles} />
-          <RadioButtonOn style={fillStyles} />
+          <RadioButtonOff style={this.mergeAndPrefix(
+            styles.target,
+            this.props.checked && styles.targetWhenChecked,
+            this.props.style,
+            this.props.disabled && styles.targetWhenDisabled
+          )} />
+          <RadioButtonOn style={this.mergeAndPrefix(
+            styles.fill,
+            this.props.checked && styles.fillWhenChecked,
+            this.props.style,
+            this.props.disabled && styles.fillWhenDisabled
+          )} />
       </div>
     );
 
@@ -81,7 +90,7 @@ var RadioButton = React.createClass({
       inputType: "radio",
       switched: this.props.checked,
       switchElement: radioButtonElement,
-      iconStyle: iconStyles,
+      iconStyle: styles.icon,
       onSwitch: this._handleCheck,
       onParentShouldUpdate: this._handleStateChange,
       labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "right"
diff --git a/src/raised-button.jsx b/src/raised-button.jsx
index 6bfb297b31672f..7ec6f8e9d396b1 100644
--- a/src/raised-button.jsx
+++ b/src/raised-button.jsx
@@ -46,10 +46,9 @@ var RaisedButton = React.createClass({
       zDepth: zDepth,
       initialZDepth: zDepth,
     });
+    this.styles = this.getStyles();
   },
 
-  /** Styles */
-
   _getBackgroundColor: function() {
     return  this.props.disabled ? this.getTheme().disabledColor :
             this.props.primary ? this.getTheme().primaryColor :
@@ -57,67 +56,11 @@ var RaisedButton = React.createClass({
             this.getTheme().color; 
   },
 
-  _main: function() {
-    return this.mergeAndPrefix({
-      display: 'inline-block',
-      minWidth: this.getThemeButton().minWidth,
-      height: this.getThemeButton().height,
-    });
-  },
-
-  _container: function() {
-    return  {
-      position: 'relative',
-      height: '100%',
-      width: '100%',
-      padding: 0,
-      overflow: 'hidden',
-      borderRadius: 2,
-      transition: Transitions.easeOut(),
-      backgroundColor: this._getBackgroundColor(),
-
-      //This is need so that ripples do not bleed
-      //past border radius.
-      //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
-      transform: 'translate3d(0, 0, 0)',
-    };
-  },
-
-  _label: function() {
-    var style = {
-      position: 'relative',
-      opacity: 1,
-      fontSize: '14px',
-      letterSpacing: 0,
-      textTransform: 'uppercase',
-      fontWeight: Typography.fontWeightMedium,
-      margin: 0,
-      padding: '0px ' + this.context.theme.spacing.desktopGutterLess + 'px',
-      userSelect: 'none',
-      lineHeight: this.getThemeButton().height + 'px',
-      color:  this.props.disabled ? this.getTheme().disabledTextColor :
-              this.props.primary ? this.getTheme().primaryTextColor :
-              this.props.secondary ? this.getTheme().secondaryTextColor :
-              this.getTheme().textColor,
-    };
-
-    if (this.props.labelStyle) style = this.mergeAndPrefix(style, this.props.labelStyle);
-
-    return style;
-  },
-
-  _overlay: function() {
-    var style = {
-      transition: Transitions.easeOut(),
-      top: 0,
-    };
-
-    if (this.state.hovered && !this.props.disabled) {
-      var amount = (this.props.primary || this.props.secondary) ? 0.4 : 0.08;
-      style.backgroundColor = ColorManipulator.fade(this._label().color, amount);
-    }
-
-    return style;
+  _getLabelColor: function() {
+    return  this.props.disabled ? this.getTheme().disabledTextColor :
+            this.props.primary ? this.getTheme().primaryTextColor :
+            this.props.secondary ? this.getTheme().secondaryTextColor :
+            this.getTheme().textColor;
   },
 
   getThemeButton: function() {
@@ -128,6 +71,53 @@ var RaisedButton = React.createClass({
     return this.context.theme.component.raisedButton;
   },
 
+  getStyles: function() {
+    var amount = (this.props.primary || this.props.secondary) ? 0.4 : 0.08;
+    var styles = {
+      root: {
+        display: 'inline-block',
+        minWidth: this.getThemeButton().minWidth,
+        height: this.getThemeButton().height
+      },
+      container: {
+        position: 'relative',
+        height: '100%',
+        width: '100%',
+        padding: 0,
+        overflow: 'hidden',
+        borderRadius: 2,
+        transition: Transitions.easeOut(),
+        backgroundColor: this._getBackgroundColor(),
+
+        //This is need so that ripples do not bleed
+        //past border radius.
+        //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
+        transform: 'translate3d(0, 0, 0)'
+      },
+      label: {
+        position: 'relative',
+        opacity: 1,
+        fontSize: '14px',
+        letterSpacing: 0,
+        textTransform: 'uppercase',
+        fontWeight: Typography.fontWeightMedium,
+        margin: 0,
+        padding: '0px ' + this.context.theme.spacing.desktopGutterLess + 'px',
+        userSelect: 'none',
+        lineHeight: this.getThemeButton().height + 'px',
+        color:  this._getLabelColor(),
+      },
+      overlay: {
+        transition: Transitions.easeOut(),
+        top: 0
+      },
+      overlayWhenHovered: {
+        backgroundColor: ColorManipulator.fade(this._getLabelColor(), amount)
+      }
+    };
+    return styles;
+  },
+
   render: function() {
     var {
       label,
@@ -135,20 +125,30 @@ var RaisedButton = React.createClass({
       secondary,
       ...other } = this.props;
 
+    if (!this.hasOwnProperty('styles')) this.styles = this.getStyles();
+
     var labelElement;
-    if (label) labelElement = <span style={this._label()}>{label}</span>;
+    if (label) {
+      labelElement = (
+        <span style={this.mergeAndPrefix(this.styles.label, this.props.labelStyle)}>
+          {label}
+        </span>
+      );
+    }
 
-    var rippleColor = this._label().color;
+    var rippleColor = this.styles.label.color;
     var rippleOpacity = !(primary || secondary) ? 0.1 : 0.16;
 
+    if (!this.hasOwnProperty('styles')) this.styles = this.getStyles();
+
     return (
       <Paper 
-        style={this._main()} 
+        style={this.mergeAndPrefix(this.styles.root, this.props.style)} 
         innerStyle={{transition: Transitions.easeOut()}}
         zDepth={this.state.zDepth}>
           <EnhancedButton {...other}
             ref="container"
-            style={this._container()}
+            style={this.mergeAndPrefix(this.styles.container)}
             onMouseUp={this._handleMouseUp}
             onMouseDown={this._handleMouseDown}
             onMouseOut={this._handleMouseOut}
@@ -160,9 +160,12 @@ var RaisedButton = React.createClass({
             focusRippleOpacity={rippleOpacity}
             touchRippleOpacity={rippleOpacity}
             onKeyboardFocus={this._handleKeyboardFocus}>
-              <div ref="overlay" style={this._overlay()} >
-                {labelElement}
-                {this.props.children}
+              <div ref="overlay" style={this.mergeAndPrefix(
+                  this.styles.overlay,
+                  (this.state.hovered && !this.props.disabled) && this.styles.overlayWhenHovered
+                )}>
+                  {labelElement}
+                  {this.props.children}
               </div>
           </EnhancedButton>
       </Paper>
@@ -206,7 +209,7 @@ var RaisedButton = React.createClass({
     if (keyboardFocused && !this.props.disabled) {
       this.setState({ zDepth: this.state.initialZDepth + 1 });
       var amount = (this.props.primary || this.props.secondary) ? 0.4 : 0.08;
-      this.refs.overlay.getDOMNode().style.backgroundColor = ColorManipulator.fade(this._label().color, amount);
+      this.refs.overlay.getDOMNode().style.backgroundColor = ColorManipulator.fade(this.mergeAndPrefix(this.styles.label, this.props.labelStyle).color, amount);
     } else if (!this.state.hovered) {
       this.setState({ zDepth: this.state.initialZDepth });
       this.refs.overlay.getDOMNode().style.backgroundColor = 'transparent';
diff --git a/src/ripples/circle.jsx b/src/ripples/circle.jsx
index 85f5824e3ce2ba..fa8d8119ee0673 100644
--- a/src/ripples/circle.jsx
+++ b/src/ripples/circle.jsx
@@ -43,7 +43,7 @@ var RippleCircle = React.createClass({
       transition:
         Transitions.easeOut('2s', 'opacity') + ',' +
         Transitions.easeOut('1s', 'transform')
-    });
+    }, this.props.style);
 
     return (
       <div {...other} style={styles} />
diff --git a/src/ripples/focus-ripple.jsx b/src/ripples/focus-ripple.jsx
index 0e85f008f253a4..9059bd1aef7755 100644
--- a/src/ripples/focus-ripple.jsx
+++ b/src/ripples/focus-ripple.jsx
@@ -38,7 +38,7 @@ var FocusRipple = React.createClass({
       transition: Transitions.easeOut(),
       transform: this.props.show ? 'scale(1)' : 'scale(0)',
       opacity: this.props.show ? 1 : 0
-    });
+    }, this.props.style);
 
     var innerStyles = this.mergeAndPrefix({
       position: 'absolute',
diff --git a/src/ripples/touch-ripple.jsx b/src/ripples/touch-ripple.jsx
index f12a9f5968bcf9..a3704cb4faeeb2 100644
--- a/src/ripples/touch-ripple.jsx
+++ b/src/ripples/touch-ripple.jsx
@@ -30,7 +30,7 @@ var TouchRipple = React.createClass({
       position: 'absolute',
       top: 0,
       left: 0
-    });
+    }, this.props.style);
 
     return (
       <div
diff --git a/src/slider.jsx b/src/slider.jsx
index f91af21d82e951..6f341551097ad1 100644
--- a/src/slider.jsx
+++ b/src/slider.jsx
@@ -59,200 +59,173 @@ var Slider = React.createClass({
     }
   },
 
-  // Styles
-  main: function() {
-    return this.mergeAndPrefix({
-      touchCallout: 'none',
-      userSelect: 'none',
-      cursor: 'default',
-      height: this.getTheme().handleSizeActive,
-      position: 'relative',
-      marginTop: 24,
-      marginBottom: 48
-    });
-  },
-
-  track: function() {
-    return {
-      position: 'absolute',
-      top: (this.getTheme().handleSizeActive - this.getTheme().trackSize) / 2,
-      left: 0,
-      width: '100%',
-      height: this.getTheme().trackSize
-    }
-  },
-
-  filledAndRemaining: function() {
-    return {
-      position: 'absolute',
-      top: 0,
-      height: '100%',
-      transition: Transitions.easeOut(null, 'margin'),
-    }
+  getTheme: function() {
+    return this.context.theme.component.slider;
   },
 
-  filled: function(fillGutter) {
-    return this.mergeAndPrefix(this.filledAndRemaining(), {
+  getStyles: function() {
+    var size = this.getTheme().handleSize + this.getTheme().trackSize;
+    var gutter = (this.getTheme().handleSizeDisabled + this.getTheme().trackSize) / 2;
+    var fillGutter = this.getTheme().handleSizeDisabled - this.getTheme().trackSize;
+    var styles = {
+      root: {
+        touchCallout: 'none',
+        userSelect: 'none',
+        cursor: 'default',
+        height: this.getTheme().handleSizeActive,
+        position: 'relative',
+        marginTop: 24,
+        marginBottom: 48
+      },
+      track: {
+        position: 'absolute', 
+        top: (this.getTheme().handleSizeActive - this.getTheme(). trackSize) / 2,
+        left: 0,
+        width: '100%',
+        height: this.getTheme().trackSize      
+      },
+      filledAndRemaining: {
+        position: 'absolute',
+        top: 0,
+        height: '100%',
+        transition: Transitions.easeOut(null, 'margin'),
+      },
+      percentZeroRemaining: { 
+        left: 1,
+        marginLeft: gutter
+      },
+      handle: {
+        boxSizing: 'border-box',
+        position: 'absolute',
+        cursor: 'pointer',
+        pointerEvents: 'inherit',
+        top: ((this.getTheme().handleSizeActive - this.getTheme().trackSize) / 2) + 'px',
+        left: '0%',
+        zIndex: 1,
+        margin: (this.getTheme().trackSize / 2) + 'px 0 0 0',   
+        width: this.getTheme().handleSize,
+        height: this.getTheme().handleSize,
+        backgroundColor: this.getTheme().selectionColor,
+        backgroundClip: 'padding-box',
+        border: '0px solid transparent',
+        borderRadius: '50%',
+        transform: 'translate(-50%, -50%)',
+        transition:
+          Transitions.easeOut('450ms', 'border') + ',' +
+          Transitions.easeOut('450ms', 'width') + ',' +
+          Transitions.easeOut('450ms', 'height'),
+        overflow: 'visible'      
+      },
+      handleWhenDisabled: {
+        boxSizing: 'content-box',
+        cursor: 'not-allowed',
+        backgroundColor: this.getTheme().trackColor,
+        width: this.getTheme().handleSizeDisabled,
+        height: this.getTheme().handleSizeDisabled,
+        border: '2px solid white'
+      },
+      handleWhenPercentZero: {
+        border: this.getTheme().trackSize + 'px solid ' + this.getTheme().trackColor,
+        backgroundColor: this.getTheme().handleFillColor,
+        boxShadow: 'none'
+      },
+      handleWhenActive: {
+        borderColor: this.getTheme().trackColorSelected,
+        width: this.getTheme().handleSizeActive,
+        height: this.getTheme().handleSizeActive,
+        transition:
+          Transitions.easeOut('450ms', 'backgroundColor') + ',' +
+          Transitions.easeOut('450ms', 'width') + ',' +
+          Transitions.easeOut('450ms', 'height')
+      },
+      ripples: {
+        height: '300%',
+        width: '300%',
+        top: '-12px',
+        left: '-12px'
+      },
+      handleWhenDisabledAndZero: {
+        width: (size / 2) + 'px',
+        height: (size /2) + 'px'
+      },
+      handleWhenPercentZeroAndHovered: {
+        border: this.getTheme().trackSize + 'px solid ' + this.getTheme().handleColorZero,
+        width: size + 'px',
+        height: size + 'px'
+      },
+    };
+    styles.filled = this.mergeAndPrefix(styles.filledAndRemaining, {
       left: 0,
       backgroundColor: (this.props.disabled) ? 
         this.getTheme().trackColor : 
         this.getTheme().selectionColor,
       marginRight: fillGutter,
-      width: (this.state.percent * 100) + (this.props.disabled ? -2 : 0) + '%'
+      width: (this.state.percent * 100) + (this.props.disabled ? -1 : 0) + '%'
     });
-  },
-
-  remaining: function(fillGutter) {
-    return this.mergeAndPrefix(this.filledAndRemaining(), {
+    styles.remaining = this.mergeAndPrefix(styles.filledAndRemaining, {
       right: 0,
       backgroundColor: this.getTheme().trackColor,
       marginLeft: fillGutter,
-      width: ((1 - this.state.percent) * 100) + (this.props.disabled ? -2 : 0) + '%'
+      width: ((1 - this.state.percent) * 100) + (this.props.disabled ? -1 : 0) + '%'
     });
-  },
-
-  percentZeroRemaining: function(gutter) {
-    var style = {
-      left: 1,
-      marginLeft: gutter
-    };
-
-    style.width = this.remaining().width - style.left;
-
-    return style;
-  },
-
-  handle: function() {
-    return {
-      position: 'absolute',
-      cursor: 'pointer',
-      pointerEvents: 'inherit',
-      top: ((this.getTheme().handleSizeActive - this.getTheme().trackSize) / 2) + 'px',
-      left: '0%',
-      zIndex: 1,
-      margin: (this.getTheme().trackSize / 2) + 'px 0 0 0',   
-      width: this.getTheme().handleSize,
-      height: this.getTheme().handleSize,
-      backgroundColor: this.getTheme().selectionColor,
-      backgroundClip: 'padding-box',
-      border: '0px solid transparent',
-      borderRadius: '50%',
-      transform: 'translate(-50%, -50%)',
-      transition:
-        Transitions.easeOut('450ms', 'border') + ',' +
-        Transitions.easeOut('450ms', 'width') + ',' +
-        Transitions.easeOut('450ms', 'height'),
-      overflow: 'visible'
-    }    
-  },
-
-  disabledHandle: function() {
-    var size = this.getTheme().handleSize + this.getTheme().trackSize;
-    var style = {
-      cursor: 'not-allowed',
-      backgroundColor: this.getTheme().trackColor,
-      width: this.getTheme().handleSizeDisabled,
-      height: this.getTheme().handleSizeDisabled,
-      border: '2px solid white'
-    };
 
-    if (this.state.percent !== 0) {
-      style.width = size;
-      style.height = size;
-    }
-
-    return style;
-  },
-
-  percentZeroHandle: function() {
-    var size = this.getTheme().handleSize + this.getTheme().trackSize;
-    var style = {
-      border: this.getTheme().trackSize + 'px solid ' + this.getTheme().trackColor,
-      backgroundColor: this.getTheme().handleFillColor,
-      boxShadow: 'none'
-    };
-
-    if ((this.state.hovered) && !this.props.disabled) {
-      style = this.mergeAndPrefix(style, {
-        border: this.getTheme().trackSize + 'px solid ' + this.getTheme().handleColorZero,
-        width: size,
-        height: size
-      });
-    }
-
-    return style;
-  },
-
-  activeHandle: function() {
-    return {
-      borderColor: this.getTheme().trackColorSelected,
-      width: this.getTheme().handleSizeActive,
-      height: this.getTheme().handleSizeActive,
-      transition:
-        Transitions.easeOut('450ms', 'backgroundColor') + ',' +
-        Transitions.easeOut('450ms', 'width') + ',' +
-        Transitions.easeOut('450ms', 'height')
-    }
-  },
-
-  ripples: function(rippleType) {
-    return {
-      height: '300%',
-      width: '300%',
-      top: '-12px',
-      left: '-12px'
-    }
-  },
+    styles.percentZeroRemaining.width = styles.remaining.width - styles.percentZeroRemaining.left;
 
-  getTheme: function() {
-    return this.context.theme.component.slider;
+    return styles;
   },
 
   render: function() {
-
-    var gutter = (this.getTheme().handleSizeDisabled + this.getTheme().trackSize) / 2;
-    var fillGutter = this.getTheme().handleSizeDisabled - this.getTheme().trackSize;
     var percent = this.state.percent;
     if (percent > 1) percent = 1; else if (percent < 0) percent = 0;
-    
-    var sliderStyles = this.main();
-    var trackStyles = this.track();
-    var filledStyles = this.filled(fillGutter);
-    var remainingStyles = this.remaining(fillGutter);
-    var handleStyles = this.handle();
-
-    var rippleShowCondition = (this.state.hovered && !this.state.active) && this.state.percent !== 0;
-
-    var focusRipple = (
-      <FocusRipple 
-        ref="focusRipple" 
-        key="focusRipple"
-        style={{height: '12px'}}
-        innerStyle={this.ripples('focus')} 
-        color={this.state.percent === 0 ? 
-          this.getTheme().handleColorZero : this.getTheme().rippleColor}
-        show={rippleShowCondition}/>
+    var gutter = (this.getTheme().handleSizeDisabled + this.getTheme().trackSize) / 2;
+    var fillGutter = this.getTheme().handleSizeDisabled - this.getTheme().trackSize;
+
+    var styles = this.getStyles();
+    var sliderStyles = this.mergeAndPrefix(styles.root, this.props.style);
+    var trackStyles = styles.track;
+    var filledStyles = styles.filled;
+    var remainingStyles = this.mergeAndPrefix(
+      styles.remaining,
+      percent === 0 && styles.percentZeroRemaining
+    );
+    var handleStyles = percent === 0 ? this.mergeAndPrefix(
+      styles.handle,
+      styles.handleWhenPercentZero,
+      this.state.active && styles.handleWhenActive,
+      this.props.focused && {outline: 'none'},
+      this.state.hovered && styles.handleWhenPercentZeroAndHovered,
+      this.props.disabled && styles.handleWhenDisabledAndZero
+    ) : this.mergeAndPrefix(
+      styles.handle,
+      this.state.active && styles.handleWhenActive,
+      this.props.focused && {outline: 'none'},
+      this.props.disabled && styles.handleWhenDisabled
     );
 
-    var ripples = this.props.disabled || this.props.disableFocusRipple ? null : focusRipple;
+    var rippleStyle = {height: '12px', width: '12px'};
 
-    if (this.props.disabled) {
-      handleStyles = this.mergeAndPrefix(handleStyles, this.disabledHandle());
-    } else if (this.state.active) {
-      handleStyles = this.mergeAndPrefix(handleStyles, this.activeHandle());
-    } else if (this.state.hovered || this.state.focused) {
+    if ((this.state.hovered || this.state.focused) && !this.props.disabled) {
       remainingStyles.backgroundColor = this.getTheme().trackColorSelected;
     }
 
-    if (percent === 0) {
-      handleStyles = this.mergeAndPrefix(handleStyles, this.percentZeroHandle());
-      remainingStyles = this.mergeAndPrefix(remainingStyles, this.percentZeroRemaining(gutter));
-      filledStyles.marginRight = gutter;
-    }
-
-    if (this.state.focused) handleStyles.outline = 'none';
+    if (percent === 0) filledStyles.marginRight = gutter;    
     if (this.state.percent === 0 && this.state.active) remainingStyles.marginLeft = fillGutter;
 
+    var rippleShowCondition = (this.state.hovered || this.state.focused) && !this.state.active && this.state.percent !== 0;
+    var rippleColor = this.state.percent === 0 ? this.getTheme().handleColorZero : this.getTheme().rippleColor;
+    var focusRipple;
+    if (!this.props.disabled && !this.props.disableFocusRipple) {
+      focusRipple = (
+        <FocusRipple 
+          ref="focusRipple" 
+          key="focusRipple"
+          style={rippleStyle}
+          innerStyle={styles.ripples} 
+          show={rippleShowCondition}
+          color={rippleColor}/>
+      );
+    }
+
     return (
       <div style={this.props.style}>
         <span className="mui-input-highlight"></span>
@@ -277,7 +250,7 @@ var Slider = React.createClass({
                 onDrag={this._onDragUpdate}
                 onMouseDown={this._onMouseDown}>
                   <div style={handleStyles} tabIndex={0}>
-                    {ripples}
+                    {focusRipple}
                   </div>
               </Draggable>
             </div>
@@ -353,11 +326,11 @@ var Slider = React.createClass({
   },
 
   _onMouseUp: function (e) {
-    this.setState({active: false});
+    if (!this.props.disabled) this.setState({active: false});
   },
 
   _onMouseDown: function (e) {
-    this.setState({active: true});
+    if (!this.props.disabled) this.setState({active: true});
   },
 
   _onDragStart: function(e, ui) {
diff --git a/src/snackbar.jsx b/src/snackbar.jsx
index cec3717d28f5d9..0ca516fcd96368 100644
--- a/src/snackbar.jsx
+++ b/src/snackbar.jsx
@@ -36,7 +36,7 @@ var Snackbar = React.createClass({
     if (prevState.open != this.state.open) {
       if (this.state.open) {
         //Only Bind clickaway after transition finishes
-        CssEvent.onTransitionEnd(this.getDOMNode(), function() {
+        CssEvent.onTransitionEnd(React.findDOMNode(this.refs.root), function() {
           this._bindClickAway();
         }.bind(this));
       } else {
@@ -45,55 +45,6 @@ var Snackbar = React.createClass({
     }
   },
 
-  _main: function() {
-    return this.mergeAndPrefix({
-      color: this.getTheme().textColor,
-      backgroundColor: this.getTheme().backgroundColor,
-      borderRadius: 2,
-      padding: '0px ' + this.getSpacing().desktopGutter + 'px',
-      height: this.getSpacing().desktopSubheaderHeight,
-      lineHeight: this.getSpacing().desktopSubheaderHeight + 'px',
-      minWidth: 288,
-      maxWidth: 568,
-
-      position: 'fixed',
-      zIndex: 10,
-      bottom: this.getSpacing().desktopGutter,
-      marginLeft: this.getSpacing().desktopGutter,
-
-      left: -10000,
-      opacity: 0,
-      transform: 'translate3d(0, 20px, 0)',
-      transition:
-        Transitions.easeOut('0ms', 'left', '400ms') + ',' +
-        Transitions.easeOut('400ms', 'opacity') + ',' +
-        Transitions.easeOut('400ms', 'transform'),
-    });
-  },
-
-  _openMain: function() {
-    return {
-      left: 0,
-      opacity: 1,
-      transform: 'translate3d(0, 0, 0)',
-      transition:
-        Transitions.easeOut('0ms', 'left', '0ms') + ',' +
-        Transitions.easeOut('400ms', 'opacity', '0ms') + ',' +
-        Transitions.easeOut('400ms', 'transform', '0ms'),
-    }
-  },
-
-  _action: function() {
-    return {
-      color: this.getTheme().actionColor,
-      float: 'right',
-      marginTop: 6,
-      marginRight: -16,
-      marginLeft: this.getSpacing().desktopGutter,
-      backgroundColor: 'transparent',
-    }
-  },
-
   getTheme: function() {
     return this.context.theme.component.snackbar;
   },
@@ -102,25 +53,73 @@ var Snackbar = React.createClass({
     return this.context.theme.spacing;
   },
 
+  getStyles: function() {
+    var styles = {
+      root: {
+        color: this.getTheme().textColor,
+        backgroundColor: this.getTheme().backgroundColor,
+        borderRadius: 2,
+        padding: '0px ' + this.getSpacing().desktopGutter + 'px',
+        height: this.getSpacing().desktopSubheaderHeight,
+        lineHeight: this.getSpacing().desktopSubheaderHeight + 'px',
+        minWidth: 288,
+        maxWidth: 568,
+
+        position: 'fixed',
+        zIndex: 10,
+        bottom: this.getSpacing().desktopGutter,
+        marginLeft: this.getSpacing().desktopGutter,
+
+        left: -10000,
+        opacity: 0,
+        transform: 'translate3d(0, 20px, 0)',
+        transition:
+          Transitions.easeOut('0ms', 'left', '400ms') + ',' +
+          Transitions.easeOut('400ms', 'opacity') + ',' +
+          Transitions.easeOut('400ms', 'transform'),
+      },
+      action: {
+        color: this.getTheme().actionColor,
+        float: 'right',
+        marginTop: 6,
+        marginRight: -16,
+        marginLeft: this.getSpacing().desktopGutter,
+        backgroundColor: 'transparent'
+      },
+      rootWhenOpen: {
+        left: '0px',
+        opacity: 1,
+        transform: 'translate3d(0, 0, 0)',
+        transition:
+          Transitions.easeOut('0ms', 'left', '0ms') + ',' +
+          Transitions.easeOut('400ms', 'opacity', '0ms') + ',' +
+          Transitions.easeOut('400ms', 'transform', '0ms')   
+      }
+    };
+    return styles;
+  },
+
   render: function() {
 
-    var styles = this._main();
-    if (this.state.open) styles = this.mergeStyles(styles, this._openMain());
+    var styles = this.getStyles(); 
 
     var action;
     if (this.props.action) {
       action = (
         <FlatButton
-          style={this._action()}
+          style={styles.action}
           label={this.props.action}
           onTouchTap={this.props.onActionTouchTap} />
       );
     }
 
+    var rootStyles = styles.root;
+    if (this.state.open) rootStyles = this.mergeStyles(styles.root, styles.rootWhenOpen);
+    
     return (
-      <span style={styles}>
-        <span className="mui-snackbar-message">{this.props.message}</span>
-        {action}
+      <span ref="root" style={rootStyles}>
+          <span>{this.props.message}</span>
+          {action}
       </span>
     );
   },
diff --git a/src/styles/theme-manager.js b/src/styles/theme-manager.js
index e0881153ac317c..dbddfaf90fec3b 100644
--- a/src/styles/theme-manager.js
+++ b/src/styles/theme-manager.js
@@ -1,6 +1,7 @@
 var Color = require('./colors');
 var Spacing = require('./spacing');
 var ColorManipulator = require('../utils/color-manipulator');
+var Extend = require('../utils/extend');
 
 var Types = {
   LIGHT: require('./themes/light-theme'),
@@ -8,44 +9,6 @@ var Types = {
 };
 
 var ThemeManager = function() {
-
-  /** 
-  *  A recursive merge between two objects. Keep in mind that overriding the 
-  *  palette nested object of theme does not automatically update component
-  *  properties, because they are still using the old color values of palette
-  *  that they were defined with. 
-  *
-  for all component variables of a theme. Use setPalette
-  *  if you would like to override a theme's palette object.
-  * 
-  *  @param theme     - the object whose properties are to be overwritten. It
-  *                     should be either the root level or some nested level 
-  *                     of theme.
-  *  @param overrides - an object containing properties to be overwritten. It 
-  *                     should have the same structure as the theme object.
-  */
-  var merge = function(theme, overrides) {
-    var mergeObject = {};
-
-    Object.keys(theme).forEach(function(currentKey) {
-
-      var overridesCheck = theme[currentKey] && !Array.isArray(theme[currentKey]);
-      
-      // Recursive call to next level
-      if (typeof(theme[currentKey]) === 'object' && overridesCheck) 
-        mergeObject[currentKey] = merge(theme[currentKey], overrides[currentKey]);
-      else {
-        if (overrides && overrides[currentKey])
-          mergeObject[currentKey] = overrides[currentKey]; 
-        else
-          mergeObject[currentKey] = theme[currentKey];
-      }
-
-    });
-
-    return mergeObject;
-  };
-
   return {
     types: Types,
     template: Types.LIGHT,
@@ -60,18 +23,19 @@ var ThemeManager = function() {
       return this;
     },
 
+    // Component gets updated to reflect palette changes.
     setTheme: function(newTheme) {
       this.setPalette(newTheme.getPalette());
       this.setComponentThemes(newTheme.getComponentThemes(newTheme.getPalette()));
     },
 
     setPalette: function(newPalette) {
-      this.palette = merge(this.palette, newPalette);
-      this.component = merge(this.component, this.template.getComponentThemes(this.palette));
+      this.palette = Extend(this.palette, newPalette);
+      this.component = Extend(this.component, this.template.getComponentThemes(this.palette));
     },
 
     setComponentThemes: function(overrides) {
-      this.component = merge(this.component, overrides);
+      this.component = Extend(this.component, overrides);
     }
   };
 };
diff --git a/src/styles/themes/dark-theme.js b/src/styles/themes/dark-theme.js
index 706b49e6d49f02..b4cf13f508145a 100644
--- a/src/styles/themes/dark-theme.js
+++ b/src/styles/themes/dark-theme.js
@@ -6,7 +6,7 @@ var DarkTheme = {
     return {
       textColor: Colors.fullWhite,
       canvasColor: '#303030',
-      borderColor: Colors.grey300,
+      borderColor:  ColorManipulator.fade(Colors.fullWhite, 0.3), //Colors.grey300
       disabledColor: ColorManipulator.fade(Colors.fullWhite, 0.3)
     };
   },
diff --git a/src/svg-icons/svg-icon.jsx b/src/svg-icons/svg-icon.jsx
index 78708159603d31..616d6644f5bf26 100644
--- a/src/svg-icons/svg-icon.jsx
+++ b/src/svg-icons/svg-icon.jsx
@@ -19,27 +19,26 @@ var SvgIcon = React.createClass({
     };
   },
 
-  /** Styles */
-  _main: function() {
-    var style = this.mergeAndPrefix({
-      display: 'inline-block',
-      height: '24px',
-      width: '24px',
-      userSelect: 'none',
-      fill: this.getTheme().textColor
-    });
-
-    if (this.state.isHovered && this.props.hoverStyle) {
-      style = this.mergeAndPrefix(style, this.props.hoverStyle);
-    }
-
-    return style;
-  },
-
   getTheme: function() {
     return this.context.theme.palette;
   },
 
+  getStyles: function() {
+    var styles = {
+      root: {
+        display: 'inline-block',
+        height: '24px',
+        width: '24px',
+        userSelect: 'none',
+        fill: this.getTheme().textColor
+      },
+      rootWhenHovered: {
+
+      }
+    };
+    return styles;
+  },
+
   render: function() {
 
     var {
@@ -55,10 +54,13 @@ var SvgIcon = React.createClass({
       <svg
         {...other}
         viewBox="0 0 24 24"
-        style={this._main()}
         onMouseOver={this._onMouseOver} 
-        onMouseOut={this._onMouseOut}>
-          {this.props.children}
+        onMouseOut={this._onMouseOut}
+        style={this.mergeAndPrefix(
+          this.getStyles().root, 
+          this.props.style,
+          this.state.isHovered && this.props.hoverStyle)}>
+            {this.props.children}
       </svg>
     );
   },
diff --git a/src/tabs/tab.jsx b/src/tabs/tab.jsx
index f3409bb6a48d1e..65f0ca18a6411b 100644
--- a/src/tabs/tab.jsx
+++ b/src/tabs/tab.jsx
@@ -36,7 +36,7 @@ var Tab = React.createClass({
       'fontWeight': '500',
       'font': this.getTheme().fontFamily,
       'width': this.props.width
-    });
+    }, this.props.style);
 
     if (this.props.selected) styles.opacity = '1';
 
diff --git a/src/tabs/tabs.jsx b/src/tabs/tabs.jsx
index 7946284e8e57aa..b6e333c9b84669 100644
--- a/src/tabs/tabs.jsx
+++ b/src/tabs/tabs.jsx
@@ -40,7 +40,7 @@ var Tabs = React.createClass({
 
   render: function(){
 
-    var tabItemContainerStyle = this.mergeStyles({
+    var tabItemContainerStyle = this.mergeAndPrefix({
       margin: '0',
       padding: '0',
       width: '100%',
diff --git a/src/text-field.jsx b/src/text-field.jsx
index 3e09231b44d28b..0983854b986ffa 100644
--- a/src/text-field.jsx
+++ b/src/text-field.jsx
@@ -61,144 +61,127 @@ var TextField = React.createClass({
     if (newState) this.setState(newState);
   },
 
-  /** Styles */
-
   errorColor: Colors.red500,
 
   _getDisabledTextColor: function() {
-    return ColorManipulator.fade(this.getTheme().textColor, 0.3);
+    return this.getTheme().disabledColor;
   },
 
-  _main: function() {
-    return this.mergeAndPrefix({
-      fontSize: '16px',
-      lineHeight: '24px',
-      width: (64 * 4),
-      height: (this.props.floatingLabelText) ? 72 : 48,
-      display: 'inline-block',
-      position: 'relative',
-      fontFamily: this.context.theme.contentFontFamily,
-      transition: Transitions.easeOut('200ms', 'height'),
-    });
+  getTheme: function() {
+    return this.context.theme.palette;
   },
 
-  _error: function() {
-    return {
-      position: 'absolute',
-      bottom: -10,
-      fontSize: '12px',
-      lineHeight: '12px',
-      color: this.errorColor,
-      transition: Transitions.easeOut(),
+  getStyles: function() {
+    var styles = {
+      root: {
+        fontSize: '16px',
+        lineHeight: '24px',
+        width: (64 * 4),
+        height: (this.props.floatingLabelText) ? 72 : 48,
+        display: 'inline-block',
+        position: 'relative',
+        fontFamily: this.context.theme.contentFontFamily,
+        transition: Transitions.easeOut('200ms', 'height')
+      },
+      error: {
+        position: 'absolute',
+        bottom: -10,
+        fontSize: '12px',
+        lineHeight: '12px',
+        color: this.errorColor,
+        transition: Transitions.easeOut(),
+      },
+      hint: {
+        position: 'absolute',
+        lineHeight: '48px',
+        opacity: 1,
+        color: this._getDisabledTextColor(),
+        transition: Transitions.easeOut()            
+      },
+      input: {
+        WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        border: 'none',
+        outline: 'none',
+        backgroundColor: 'transparent',
+        color: this.getTheme().textColor,
+        font: 'inherit'
+      },
+      underline: {
+        border: 'none',
+        borderBottom: 'solid 1px ' + this.getTheme().borderColor,
+        position: 'absolute',
+        width: '100%',
+        bottom: 8,
+        margin: 0,
+        MozBoxSizing: 'content-box',
+        boxSizing: 'content-box',
+        height: 0
+      },
+      underlineAfter: {
+        position: 'absolute',
+        userSelect: 'none',
+        cursor: 'default',
+        bottom: 0,
+        color: this._getDisabledTextColor()
+      }
     };
-  },
 
-  _floatingLabel: function() {
-    var style = this.mergeAndPrefix(this._hint(), {
+    styles.floatingLabel = this.mergeAndPrefix(styles.hint, {
       top: 24,
       opacity: 1,
       transform: 'scale(1) translate3d(0, 0, 0)',
-      transformOrigin: 'left top',
-   });
-
-    if (this.state.isFocused) style.color = this.getTheme().primary1Color;
-    if (this.state.hasValue) style.color = ColorManipulator.fade(this.getTheme().textColor, 0.5);
-    if (this.state.isFocused || this.state.hasValue) style.transform = 'scale(0.75) translate3d(0, -18px, 0)';
-    if (this.props.errorText && this.state.isFocused) style.color = this.errorColor;
-
-    return style;
-  },
-
-  _hint: function() {
-    var style = {
-      position: 'absolute',
-      lineHeight: '48px',
-      opacity: 1,
-      color: this._getDisabledTextColor(),
-      transition: Transitions.easeOut(),
-    };
-
-    if (this.props.disabled) style.color = this._getDisabledTextColor();
-    if (this.state.hasValue) style.opacity = 0;
-    if (this.props.floatingLabelText) {
-      style.top = 24;
-      style.opacity = 0;
-      if (this.state.isFocused && !this.state.hasValue) style.opacity = 1;
-    }
-
-    return style;
-  },
-
-  _input: function() {
-    var style = {
-      WebkitTapHighlightColor: 'rgba(0,0,0,0)',
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      border: 'none',
-      outline: 'none',
-      backgroundColor: 'transparent',
-      color: this.getTheme().textColor,
-      font: 'inherit',
-    };
-
-    if (this.props.disabled) style.color = this._getDisabledTextColor();
-    if (this.props.floatingLabelText) style.boxSizing = 'border-box';
-    if (this.props.floatingLabelText && !this.props.multiLine) style.paddingTop = 26;
-
-    return style;
-  },
+      transformOrigin: 'left top'
+    });
 
-  _textarea: function() {
-    return this.mergeAndPrefix(this._input(), {
+    styles.textarea = this.mergeAndPrefix(styles.input, {
       paddingTop: this.props.floatingLabelText ? 36 : 12,
       boxSizing: 'border-box',
-      font: 'inherit',
+      font: 'inherit'
     });
 
-  },
-
-  _underline: function() {
-    return {
-      border: 'none',
-      borderBottom: 'solid 1px ' + this._getDisabledTextColor(),
-      position: 'absolute',
-      width: '100%',
-      bottom: 8,
-      margin: 0,
-      MozBoxSizing: 'content-box',
-      boxSizing: 'content-box',
-      height: 0,
-    };
-  },
-
-  //hack because border style dotted just doesn't look right
-  //border-bottom-style: dotted;
-  _underlineAfter: function() {
-    return this.mergeAndPrefix({
-      position: 'absolute',
-      userSelect: 'none',
-      cursor: 'default',
-      bottom: 0,
-      color: this._getDisabledTextColor(),
-    }, null);
-  },
-
-  _focusUnderline: function() {
-    var style = this.mergeAndPrefix(this._underline(), {
+    styles.focusUnderline= this.mergeAndPrefix(styles.underline, {
       borderBottom: 'solid 2px ' + this.getTheme().primary1Color,
       transform: 'scaleX(0)',
       transition: Transitions.easeOut(),
     });
 
-    if (this.props.errorText) style.borderColor = this.errorColor;
-    if (this.props.errorText || this.state.isFocused) style.transform = 'scaleX(1)';
-    
-    return style;
-  },
 
-  getTheme: function() {
-    return this.context.theme.palette;
+    if (this.props.disabled) {
+      styles.hint.color = this._getDisabledTextColor();
+      styles.input.color = this._getDisabledTextColor();
+    }
+
+    if (this.state.isFocused) {
+      styles.floatingLabel.color = this.getTheme().primary1Color;
+      styles.floatingLabel.transform = 'scale(0.75) translate3d(0, -18px, 0)';
+      styles.focusUnderline.transform = 'scaleX(1)';
+    }
+
+    if (this.state.hasValue) {
+      styles.floatingLabel.color = ColorManipulator.fade(this.getTheme().textColor, 0.5);
+      styles.floatingLabel.transform = 'scale(0.75) translate3d(0, -18px, 0)';
+      styles.hint.opacity = 0;
+    }
+
+    if (this.props.floatingLabelText) {
+      styles.hint.top = 24;
+      styles.hint.opacity = 0;
+      styles.input.boxSizing = 'border-box';
+      if (this.state.isFocused && !this.state.hasValue) styles.hint.opacity = 1;
+    }
+
+    if (this.props.errorText && this.state.isFocused) styles.floatingLabel.color = this.errorColor;
+    if (this.props.floatingLabelText && !this.props.multiLine) styles.input.paddingTop = 26;
+
+    if (this.props.errorText) {
+      styles.focusUnderline.borderColor = this.errorColor;
+      styles.focusUnderline.transform = 'scaleX(1)';
+    }
+
+    return styles;
   },
 
   render: function() {
@@ -216,19 +199,21 @@ var TextField = React.createClass({
       ...other
     } = this.props;
 
+    var styles = this.getStyles();
+
     var inputId = this.props.id || UniqueId.generate();
 
     var errorTextElement = this.state.errorText ? (
-      <div style={this._error()}>{this.state.errorText}</div>
+      <div style={this.mergeAndPrefix(styles.error)}>{this.state.errorText}</div>
     ) : null;
 
     var hintTextElement = this.props.hintText ? (
-      <div style={this._hint()}>{this.props.hintText}</div>
+      <div style={this.mergeAndPrefix(styles.hint)}>{this.props.hintText}</div>
     ) : null;
 
     var floatingLabelTextElement = this.props.floatingLabelText ? (
       <label
-        style={this._floatingLabel()}
+        style={this.mergeAndPrefix(styles.floatingLabel)}
         htmlFor={inputId}>
         {this.props.floatingLabelText}
       </label>
@@ -240,7 +225,7 @@ var TextField = React.createClass({
     inputProps = {
       id: inputId,
       ref: 'input',
-      style: this._input(),
+      style: this.mergeAndPrefix(styles.input),
       onBlur: this._handleInputBlur,
       onFocus: this._handleInputFocus,
       onKeyDown: this._handleInputKeyDown
@@ -255,7 +240,7 @@ var TextField = React.createClass({
         {...other}
         {...inputProps}
         onHeightChange={this._handleTextAreaHeightChange}
-        textareaStyle={this._textarea()} />
+        textareaStyle={this.mergeAndPrefix(styles.textarea)} />
     ) : (
       <input
         {...other}
@@ -264,19 +249,17 @@ var TextField = React.createClass({
     );
 
     var underlineElement = this.props.disabled ? (
-      <div style={this._underlineAfter()}>
+      <div style={this.mergeAndPrefix(styles.underlineAfter)}>
         .............................................................
       </div>
     ) : (
-      <hr style={this._underline()}/>
+      <hr style={this.mergeAndPrefix(styles.underline)}/>
     );
-    var focusUnderlineElement = <hr style={this._focusUnderline()} />;
-
+    var focusUnderlineElement = <hr style={this.mergeAndPrefix(styles.focusUnderline)} />;
 
-    var rootStyle = this._main();
 
     return (
-      <div className={this.props.className} style={rootStyle}>
+      <div className={this.props.className} style={this.mergeAndPrefix(styles.root, this.props.style)}>
         {floatingLabelTextElement}
         {hintTextElement}
         {inputElement}
diff --git a/src/toggle.jsx b/src/toggle.jsx
index dbc95359e96174..b154e08b869036 100644
--- a/src/toggle.jsx
+++ b/src/toggle.jsx
@@ -32,53 +32,70 @@ var Toggle = React.createClass({
     return this.context.theme.component.toggle;
   },
 
-  render: function() {
-    var {
-      onToggle,
-      ...other
-    } = this.props;
-
+  getStyles: function() {
     var toggleSize = 20;
     var toggleTrackWidth = 36;
-    var iconStyles = {
+    var styles = {
+      icon: {
         padding: '4px 0px 6px 2px'
-    };
-    var trackStyles = {
-        transition: Transitions.easeOut(),
-        width: toggleTrackWidth,
-        height: 14,
-        borderRadius: 30,
-        backgroundColor: this.props.disabled ? this.getTheme().trackDisabledColor :
-                         this.state.switched ? this.getTheme().trackOnColor : 
-                         this.getTheme().trackOffColor
-    };
-    var thumbStyles = {
+      },
+      track: {
+          transition: Transitions.easeOut(),
+          width: toggleTrackWidth,
+          height: 14,
+          borderRadius: 30,
+          backgroundColor: this.getTheme().trackOffColor
+      },
+      thumb: {
         transition: Transitions.easeOut(),
         position: 'absolute',
         top: 1,
-        left: this.state.switched ? 18 : 2,
+        left: 2,
         width: toggleSize,
         height: toggleSize,
         lineHeight: '24px',
         borderRadius: '50%',
-        backgroundColor: this.props.disabled ? this.getTheme().thumbDisabledColor :
-                         this.state.switched ? this.getTheme().thumbOnColor : 
-                         this.getTheme().thumbOffColor
+        backgroundColor: this.getTheme().thumbOffColor
+      },
+      trackWhenSwitched: {
+        backgroundColor: this.getTheme().trackOnColor
+      },      
+      thumbWhenSwitched: {
+        backgroundColor: this.getTheme().thumbOnColor,
+        left: 18
+      },
+      trackWhenDisabled: {
+        backgroundColor: this.getTheme().trackDisabledColor
+      },
+      thumbWhenDisabled: {
+        backgroundColor: this.getTheme().thumbDisabledColor
+      }
     };
+    return styles;
+  },
 
-    if (this.state.switched) {
-      trackStyles.backgroundColor = this.getTheme().trackOnColor;
-      thumbStyles.backgroundColor = this.getTheme().thumbOnColor;
-      thumbStyles.left = 18;
-    }
+  render: function() {
+    var {
+      onToggle,
+      ...other
+    } = this.props;
 
-    if (this.props.disabled) {
-      trackStyles.backgroundColor = this.getTheme().trackDisabledColor;
-      thumbStyles.backgroundColor = this.getTheme().thumbDisabledColor;
-    }
+    var styles = this.getStyles();
+
+    var trackStyles = this.mergeAndPrefix(
+      styles.track,
+      this.state.switched && styles.trackWhenSwitched,
+      this.props.disabled && styles.trackWhenDisabled
+    );
+
+    var thumbStyles = this.mergeAndPrefix(
+      styles.thumb,
+      this.state.switched && styles.thumbWhenSwitched,
+      this.props.disabled && styles.thumbWhenDisabled
+    );
 
     var toggleElement = (
-      <div>
+      <div style={this.mergeAndPrefix(this.props.style)}>
         <div style={trackStyles} />
         <Paper style={thumbStyles} circle={true} zDepth={1} />
       </div>
@@ -93,9 +110,8 @@ var Toggle = React.createClass({
       ref: "enhancedSwitch",
       inputType: "checkbox",
       switchElement: toggleElement,
-      className: "mui-toggle",
       rippleStyle: customRippleStyle,
-      iconStyle: iconStyles,
+      iconStyle: styles.icon,
       trackStyle: trackStyles,
       thumbStyle: thumbStyles,
       switched: this.state.switched,
diff --git a/src/toolbar/toolbar-group.jsx b/src/toolbar/toolbar-group.jsx
index 47b67bb7ed85c5..790f1aed1cf724 100644
--- a/src/toolbar/toolbar-group.jsx
+++ b/src/toolbar/toolbar-group.jsx
@@ -91,7 +91,7 @@ var ToolbarGroup = React.createClass({
     var styles = this.mergeAndPrefix({
       position: 'relative',
       float: this.props.float,
-    });
+    }, this.props.style);
 
     if (this.props.firstChild) styles.marginLeft = -24;
     if (this.props.lastChild) styles.marginRight = -24;
diff --git a/src/toolbar/toolbar-separator.jsx b/src/toolbar/toolbar-separator.jsx
index b5a4efb2a34550..ae81b9b0ee9c8e 100644
--- a/src/toolbar/toolbar-separator.jsx
+++ b/src/toolbar/toolbar-separator.jsx
@@ -27,7 +27,7 @@ var ToolbarSeparator = React.createClass({
       position: 'relative',
       top: ((this.getTheme().height - this.getSpacing().desktopGutterMore) / 2),
       width: 1,
-    });
+    }, this.props.style);
 
     return (
       <span className={this.props.className} style={styles}/>
diff --git a/src/toolbar/toolbar-title.jsx b/src/toolbar/toolbar-title.jsx
index 3ca6111bca06da..11ab415f4e969b 100644
--- a/src/toolbar/toolbar-title.jsx
+++ b/src/toolbar/toolbar-title.jsx
@@ -25,7 +25,7 @@ var ToolbarTitle = React.createClass({
       fontSize: this.getTheme().titleFontSize + 'px',
       display: 'inline-block',
       position: 'relative',
-    });
+    }, this.props.style);
 
     return (
       <span className={this.props.className} style={styles}>{this.props.text}</span>
diff --git a/src/toolbar/toolbar.jsx b/src/toolbar/toolbar.jsx
index 96834b9d0afbb5..98a442a9342b21 100644
--- a/src/toolbar/toolbar.jsx
+++ b/src/toolbar/toolbar.jsx
@@ -14,7 +14,7 @@ var Toolbar = React.createClass({
   },
 
   /** Styles */
-  _main: function() {
+  getStyles: function() {
     return this.mergeAndPrefix({
       boxSizing: 'border-box',
       WebkitTapHighlightColor: 'rgba(0,0,0,0)', 
@@ -22,7 +22,7 @@ var Toolbar = React.createClass({
       height: this.getTheme().height,
       width: '100%',
       padding: '0px ' + this.context.theme.spacing.desktopGutter + 'px',
-    });
+    }, this.props.style);
   },
 
   getTheme: function (argument) {
@@ -37,7 +37,7 @@ var Toolbar = React.createClass({
     if (lastChild.type.displayName === 'ToolbarGroup') lastChild.props.lastChild = true;
 
     return (
-      <div className={this.props.className} style={this._main()}>
+      <div className={this.props.className} style={this.getStyles()}>
         {this.props.children}
       </div>
     );
diff --git a/src/tooltip.jsx b/src/tooltip.jsx
index fc6e846f02d16a..febbc6dd81cbda 100644
--- a/src/tooltip.jsx
+++ b/src/tooltip.jsx
@@ -22,29 +22,42 @@ var Tooltip = React.createClass({
     this._setRippleSize();
   },
 
-  /** Styles */
-
-  _main: function() {
-    var style = {
-      position: 'absolute',
-      fontFamily: "'Roboto'",
-      fontSize: '10px',
-      lineHeight: '22px',
-      padding: '0 8px',
-      color: Colors.white,
-      overflow: 'hidden',
-      top: -10000,
-      borderRadius: 2,
-      userSelect: 'none',
-      opacity: 0,
-      transition:
-        Transitions.easeOut('0ms', 'top', '450ms') + ',' +
-        Transitions.easeOut('450ms', 'transform', '0ms') + ',' +
-        Transitions.easeOut('450ms', 'opacity', '0ms'),
-    };
-
-    if (this.props.show) {
-      style = this.mergeAndPrefix(style, {
+  getStyles: function(){
+    var styles = {
+      root: {
+        position: 'absolute',
+        fontFamily: "'Roboto'",
+        fontSize: '10px',
+        lineHeight: '22px',
+        padding: '0 8px',
+        color: Colors.white,
+        overflow: 'hidden',
+        top: -10000,
+        borderRadius: 2,
+        userSelect: 'none',
+        opacity: 0,
+        transition:
+          Transitions.easeOut('0ms', 'top', '450ms') + ',' +
+          Transitions.easeOut('450ms', 'transform', '0ms') + ',' +
+          Transitions.easeOut('450ms', 'opacity', '0ms')
+      },
+      label: {
+        position: 'relative',
+        whiteSpace: 'nowrap'
+      },
+      ripple: {
+        position: 'absolute',
+        left: '50%',
+        top: 0,
+        transform: 'translate(-50%, -50%)',
+        borderRadius: '50%',
+        backgroundColor: 'transparent',
+        transition:
+          Transitions.easeOut('0ms', 'width', '450ms') + ',' +
+          Transitions.easeOut('0ms', 'height', '450ms') + ',' +
+          Transitions.easeOut('450ms', 'backgroundColor', '0ms')
+      },
+      rootWhenShown: {
         top: -16,
         opacity: 1,
         transform: 'translate3d(0px, 16px, 0px)',
@@ -52,72 +65,51 @@ var Tooltip = React.createClass({
           Transitions.easeOut('0ms', 'top', '0ms') + ',' + 
           Transitions.easeOut('450ms', 'transform', '0ms') + ',' +
           Transitions.easeOut('450ms', 'opacity', '0ms'),
-          });
-    }
-
-    if (this.props.touch) {
-      style = this.mergeAndPrefix(style, {
+      },
+      rootWhenTouched: {
         fontSize: '14px',
         lineHeight: '44px',
-        padding: '0 16px',
-      });
-    }
-
-    return this.mergeAndPrefix(style);
-  },
-
-  _label: function() {
-    return {
-      position: 'relative',
-      whiteSpace: 'nowrap',
-    }
-  },
-
-  _ripple: function() {
-    var style = {
-      position: 'absolute',
-      left: '50%',
-      top: 0,
-      transform: 'translate(-50%, -50%)',
-      borderRadius: '50%',
-      backgroundColor: 'transparent',
-      transition:
-        Transitions.easeOut('0ms', 'width', '450ms') + ',' +
-        Transitions.easeOut('0ms', 'height', '450ms') + ',' +
-        Transitions.easeOut('450ms', 'backgroundColor', '0ms'),
-    };
-
-    if (this.props.show) {
-      style = this.mergeAndPrefix(style, {
+        padding: '0 16px'
+      },
+      rippleWhenShown: {
         backgroundColor: Colors.grey600,
         transition:
           Transitions.easeOut('450ms', 'width', '0ms') + ',' +
           Transitions.easeOut('450ms', 'height', '0ms') + ',' +
-          Transitions.easeOut('450ms', 'backgroundColor', '0ms'),
-      });
-    }
-
-    return style;
+          Transitions.easeOut('450ms', 'backgroundColor', '0ms')
+      }
+    };
+    return styles;
   },
 
-
   render: function() {
     var {
       label,
       ...other } = this.props;
-
+    var styles = this.getStyles();
     return (
-      <div {...other} style={this._main()}>
-        <div ref="ripple" style={this._ripple()} />
-        <span style={this._label()}>{this.props.label}</span>
+      <div {...other} 
+        ref="root" 
+        style={this.mergeAndPrefix(
+            styles.root,
+            this.props.show && styles.rootWhenShown,
+            this.props.touch && styles.rootWhenTouched,
+            this.props.style 
+          )}>
+        <div 
+          ref="ripple" 
+          style={this.mergeAndPrefix(
+            styles.ripple,
+            this.props.show && styles.rippleWhenShown)} />
+        <span style={this.mergeAndPrefix(styles.label)}>{this.props.label}</span>
       </div>
     );
   },
 
   _setRippleSize: function() {
-    var ripple = this.refs.ripple.getDOMNode();
+    var ripple = React.findDOMNode(this.refs.ripple);
 
-    var tooltip = window.getComputedStyle(this.getDOMNode());
+    var tooltip = window.getComputedStyle(React.findDOMNode(this.refs.root));
     var tooltipWidth = parseInt(tooltip.getPropertyValue("width"), 10);
     var tooltipHeight = parseInt(tooltip.getPropertyValue("height"), 10);
 
diff --git a/src/transition-groups/slide-in-child.jsx b/src/transition-groups/slide-in-child.jsx
index 5d09ad607337c1..57c068e973e023 100644
--- a/src/transition-groups/slide-in-child.jsx
+++ b/src/transition-groups/slide-in-child.jsx
@@ -60,7 +60,7 @@ var SlideInChild = React.createClass({
       top: '0px',
       left: '0px',
       transition: Transitions.easeOut()
-    });
+    }, this.props.style);
 
     return (
       <div {...other}
diff --git a/src/transition-groups/slide-in.jsx b/src/transition-groups/slide-in.jsx
index e73124cdfdbdbf..69f676c143aa3b 100644
--- a/src/transition-groups/slide-in.jsx
+++ b/src/transition-groups/slide-in.jsx
@@ -27,7 +27,7 @@ var SlideIn = React.createClass({
       position: 'relative',
       overflow: 'hidden',
       height: '100%'
-    });
+    }, this.props.style);
 
     return (
       <ReactTransitionGroup {...other}
diff --git a/src/utils/extend.js b/src/utils/extend.js
new file mode 100644
index 00000000000000..326e52c137ebc9
--- /dev/null
+++ b/src/utils/extend.js
@@ -0,0 +1,45 @@
+// http://stackoverflow.com/questions/1187518/javascript-array-difference
+Array.prototype.diff = function(a) {
+    return this.filter(function(i) {return a.indexOf(i) < 0;});
+};
+
+/** 
+*  A recursive merge between two objects. 
+* 
+*  @param object     - the object whose properties are to be overwritten. It
+*                     should be either the root level or some nested level.
+*  @param overrides - an object containing properties to be overwritten. It 
+*                     should have the same structure as the object object.
+*/
+var extend = function(object, overrides) {
+  var mergeObject = {};
+
+  Object.keys(object).forEach(function(currentKey) {
+
+    // Arrays and null are also objects, 
+    var overridesIsValidObject = object[currentKey] && !Array.isArray(object[currentKey]);
+    
+    // Recursive call to next level
+    if (typeof(object[currentKey]) === 'object' && overridesIsValidObject) {
+      mergeObject[currentKey] = extend(object[currentKey], overrides[currentKey]);
+    } else {
+      if (overrides && overrides[currentKey]) {
+        mergeObject[currentKey] = overrides[currentKey];
+      } else {
+        mergeObject[currentKey] = object[currentKey];
+      }
+    }
+
+  });
+
+  // Overrides not defined in object are immediately added.
+  if (overrides && typeof(overrides) === 'object' && !Array.isArray(overrides)) {
+    Object.keys(overrides).diff(Object.keys(object)).forEach(function(currentDiff) {
+      mergeObject[currentDiff] = overrides[currentDiff];
+    });
+  }
+
+  return mergeObject;
+};
+
+module.exports = extend;
\ No newline at end of file