diff --git a/src/date-picker/calendar-year.jsx b/src/date-picker/calendar-year.jsx
index 325edcfd05dd96..0f2bdd0b8032f3 100644
--- a/src/date-picker/calendar-year.jsx
+++ b/src/date-picker/calendar-year.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import StylePropable from '../mixins/style-propable';
 import Colors from '../styles/colors';
 import DateTime from '../utils/date-time';
 import YearButton from './year-button';
@@ -15,10 +14,6 @@ const CalendarYear = React.createClass({
     selectedDate: React.PropTypes.object.isRequired,
   },
 
-  mixins: [
-    StylePropable,
-  ],
-
   componentDidMount() {
     this._scrollToSelectedYear();
   },
diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx
index c6ce0173d3ecd8..747ff51cc2520b 100644
--- a/src/date-picker/calendar.jsx
+++ b/src/date-picker/calendar.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import StylePropable from '../mixins/style-propable';
 import WindowListenable from '../mixins/window-listenable';
 import DateTime from '../utils/date-time';
 import KeyCode from '../utils/key-code';
@@ -34,13 +33,11 @@ const Calendar = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
   mixins: [
-    StylePropable,
     WindowListenable,
   ],
 
@@ -70,11 +67,8 @@ const Calendar = React.createClass({
     };
   },
 
-  //to update theme inside state whenever a new theme is passed down
-  //from the parent / owner using context
   componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
-    this.setState({muiTheme: newMuiTheme});
+    const muiTheme = nextContext.muiTheme || this.state.muiTheme;
 
     if (nextProps.initialDate !== this.props.initialDate) {
       let d = nextProps.initialDate || new Date();
@@ -83,6 +77,8 @@ const Calendar = React.createClass({
         selectedDate: d,
       });
     }
+
+    this.setState({muiTheme});
   },
 
   windowListeners: {
@@ -244,6 +240,11 @@ const Calendar = React.createClass({
   },
 
   render() {
+
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
     let yearCount = DateTime.yearDiff(this.props.maxDate, this.props.minDate) + 1;
     let weekCount = DateTime.getWeekArray(this.state.displayDate, this.props.firstDayOfWeek).length;
     let toolbarInteractions = this._getToolbarInteractions();
@@ -293,7 +294,7 @@ const Calendar = React.createClass({
       },
     };
 
-    const weekTitleDayStyle = this.prepareStyles(styles.weekTitleDay);
+    const weekTitleDayStyle = prepareStyles(styles.weekTitleDay);
     const {
       DateTimeFormat,
       locale,
@@ -301,7 +302,7 @@ const Calendar = React.createClass({
     } = this.props;
 
     return (
-      <ClearFix style={this.mergeStyles(styles.root)}>
+      <ClearFix style={styles.root}>
         <DateDisplay
           DateTimeFormat={DateTimeFormat}
           locale={locale}
@@ -315,7 +316,7 @@ const Calendar = React.createClass({
           weekCount={weekCount}
         />
         {this.state.displayMonthDay &&
-          <div style={this.prepareStyles(styles.calendarContainer)}>
+          <div style={prepareStyles(styles.calendarContainer)}>
             <CalendarToolbar
               DateTimeFormat={DateTimeFormat}
               locale={locale}
@@ -350,7 +351,7 @@ const Calendar = React.createClass({
           </div>
         }
         {!this.state.displayMonthDay &&
-          <div style={this.prepareStyles(styles.yearContainer)}>
+          <div style={prepareStyles(styles.yearContainer)}>
             {this._yearSelector()}
           </div>
         }
diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx
index 519f4a986cbda2..eb2a8d36ebcc7e 100644
--- a/src/date-picker/date-display.jsx
+++ b/src/date-picker/date-display.jsx
@@ -1,9 +1,53 @@
 import React from 'react';
-import StylePropable from '../mixins/style-propable';
 import Transitions from '../styles/transitions';
 import SlideInTransitionGroup from '../transition-groups/slide-in';
 import getMuiTheme from '../styles/getMuiTheme';
 
+function getStyles(props, state) {
+  const {
+    datePicker,
+  } = state.muiTheme;
+
+  const styles = {
+    root: {
+      backgroundColor: datePicker.selectColor,
+      borderTopLeftRadius: 2,
+      borderTopRightRadius: 2,
+      color: datePicker.textColor,
+      height: 60,
+      padding: 20,
+    },
+    monthDay: {
+      display: 'inline-block',
+      fontSize: 36,
+      fontWeight: '400',
+      lineHeight: '36px',
+      height: props.mode === 'landscape' ? 76 : 38,
+      opacity: state.selectedYear ? 0.7 : 1.0,
+      transition: Transitions.easeOut(),
+      width: '100%',
+    },
+    monthDayTitle: {
+      cursor: !state.selectedYear ? 'default' : 'pointer',
+    },
+    year: {
+      margin: 0,
+      fontSize: 16,
+      fontWeight: '400',
+      lineHeight: '16px',
+      height: 16,
+      opacity: state.selectedYear ? 1.0 : 0.7,
+      transition: Transitions.easeOut(),
+      marginBottom: 10,
+    },
+    yearTitle: {
+      cursor: (state.selectedYear && !props.disableYearSelection) ? 'pointer' : 'default',
+    },
+  };
+
+  return styles;
+}
+
 const DateDisplay = React.createClass({
 
   propTypes: {
@@ -27,15 +71,10 @@ const DateDisplay = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [
-    StylePropable,
-  ],
-
   getDefaultProps() {
     return {
       disableYearSelection: false,
@@ -59,8 +98,9 @@ const DateDisplay = React.createClass({
   },
 
   componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
-    this.setState({muiTheme: newMuiTheme});
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
 
     let direction;
 
@@ -76,62 +116,6 @@ const DateDisplay = React.createClass({
     }
   },
 
-  getTheme() {
-    return this.state.muiTheme.datePicker;
-  },
-
-  getStyles() {
-    const theme = this.getTheme();
-    const isLandscape = this.props.mode === 'landscape';
-
-    const styles = {
-      root: {
-        backgroundColor: theme.selectColor,
-        borderTopLeftRadius: 2,
-        borderTopRightRadius: 2,
-        color: theme.textColor,
-        height: 60,
-        padding: 20,
-      },
-
-      monthDay: {
-        root: {
-          display: 'inline-block',
-          fontSize: 36,
-          fontWeight: '400',
-          lineHeight: '36px',
-          height: isLandscape ? 76 : 38,
-          opacity: this.state.selectedYear ? 0.7 : 1.0,
-          transition: Transitions.easeOut(),
-          width: '100%',
-        },
-
-        title: {
-          cursor: !this.state.selectedYear ? 'default' : 'pointer',
-        },
-      },
-
-      year: {
-        root: {
-          margin: 0,
-          fontSize: 16,
-          fontWeight: '400',
-          lineHeight: '16px',
-          height: 16,
-          opacity: this.state.selectedYear ? 1.0 : 0.7,
-          transition: Transitions.easeOut(),
-          marginBottom: 10,
-        },
-
-        title: {
-          cursor: (this.state.selectedYear && !this.props.disableYearSelection) ? 'pointer' : 'default',
-        },
-      },
-    };
-
-    return styles;
-  },
-
   _handleMonthDayClick() {
     if (this.props.handleMonthDayClick && this.state.selectedYear) {
       this.props.handleMonthDayClick();
@@ -158,8 +142,13 @@ const DateDisplay = React.createClass({
       style,
       ...other,
     } = this.props;
+
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
     const year = this.props.selectedDate.getFullYear();
-    const styles = this.getStyles();
+    const styles = getStyles(this.props, this.state);
 
     const dateTimeFormatted = new DateTimeFormat(locale, {
       month: 'short',
@@ -168,22 +157,22 @@ const DateDisplay = React.createClass({
     }).format(this.props.selectedDate);
 
     return (
-      <div {...other} style={this.prepareStyles(styles.root, this.props.style)}>
+      <div {...other} style={prepareStyles(Object.assign(styles.root, style))}>
         <SlideInTransitionGroup
-          style={styles.year.root}
+          style={styles.year}
           direction={this.state.transitionDirection}
         >
-          <div key={year} style={styles.year.title} onTouchTap={this._handleYearClick}>
+          <div key={year} style={styles.yearTitle} onTouchTap={this._handleYearClick}>
             {year}
           </div>
         </SlideInTransitionGroup>
         <SlideInTransitionGroup
-          style={styles.monthDay.root}
+          style={styles.monthDay}
           direction={this.state.transitionDirection}
         >
           <div
             key={dateTimeFormatted}
-            style={styles.monthDay.title}
+            style={styles.monthDayTitle}
             onTouchTap={this._handleMonthDayClick}
           >
             {dateTimeFormatted}
diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx
index 4b96b38acc441b..4e7bcf3b4835b6 100644
--- a/src/date-picker/date-picker-dialog.jsx
+++ b/src/date-picker/date-picker-dialog.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ContextPure from '../mixins/context-pure';
-import StylePropable from '../mixins/style-propable';
 import WindowListenable from '../mixins/window-listenable';
 import KeyCode from '../utils/key-code';
 import Calendar from './calendar';
@@ -39,13 +38,11 @@ const DatePickerDialog = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
   mixins: [
-    StylePropable,
     WindowListenable,
     ContextPure,
   ],
@@ -89,11 +86,10 @@ const DatePickerDialog = React.createClass({
     };
   },
 
-  //to update theme inside state whenever a new theme is passed down
-  //from the parent / owner using context
   componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
-    this.setState({muiTheme: newMuiTheme});
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
   },
 
   windowListeners: {
diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx
index de67b022aed5eb..4c4b7026d29fcd 100644
--- a/src/date-picker/date-picker.jsx
+++ b/src/date-picker/date-picker.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import StylePropable from '../mixins/style-propable';
 import WindowListenable from '../mixins/window-listenable';
 import DateTime from '../utils/date-time';
 import DatePickerDialog from './date-picker-dialog';
@@ -145,13 +144,11 @@ const DatePicker = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
   mixins: [
-    StylePropable,
     WindowListenable,
   ],
 
@@ -181,9 +178,9 @@ const DatePicker = React.createClass({
   },
 
   componentWillReceiveProps(nextProps, nextContext) {
-    if (nextContext.muiTheme) {
-      this.setState({muiTheme: nextContext.muiTheme});
-    }
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
 
     if (this._isControlled()) {
       let newDate = this._getControlledDate(nextProps);
@@ -284,8 +281,12 @@ const DatePicker = React.createClass({
       ...other,
     } = this.props;
 
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
     return (
-      <div style={this.prepareStyles(style)}>
+      <div style={prepareStyles(Object.assign({}, style))}>
         <TextField
           {...other}
           style={textFieldStyle}
diff --git a/src/date-picker/day-button.jsx b/src/date-picker/day-button.jsx
index 1f0974ab5063e6..b9dc6ce9f38c08 100644
--- a/src/date-picker/day-button.jsx
+++ b/src/date-picker/day-button.jsx
@@ -1,10 +1,66 @@
 import React from 'react';
-import StylePropable from '../mixins/style-propable';
 import Transition from '../styles/transitions';
 import DateTime from '../utils/date-time';
 import EnhancedButton from '../enhanced-button';
 import getMuiTheme from '../styles/getMuiTheme';
 
+function getStyles(props, state) {
+
+  const {
+    date,
+    disabled,
+    selected,
+  } = props;
+
+  const {
+    hover,
+  } = state;
+
+  const {
+    baseTheme,
+    datePicker,
+  } = state.muiTheme;
+
+  let labelColor = baseTheme.palette.textColor;
+  let buttonStateOpacity = 0;
+  let buttonStateTransform = 'scale(0)';
+
+  if (hover || selected) {
+    labelColor = datePicker.selectTextColor;
+    buttonStateOpacity = selected ? 1 : 0.6;
+    buttonStateTransform = 'scale(1)';
+  } else if (DateTime.isEqualDate(date, new Date())) {
+    labelColor = datePicker.color;
+  }
+
+  return {
+    root: {
+      boxSizing: 'border-box',
+      WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+      position: 'relative',
+      float: 'left',
+      width: 41,
+      padding: '4px 2px',
+      opacity: disabled && '0.6',
+    },
+    label: {
+      position: 'relative',
+      color: labelColor,
+    },
+    buttonState: {
+      position: 'absolute',
+      height: 36,
+      width: 36,
+      top: 2,
+      opacity: buttonStateOpacity,
+      borderRadius: '50%',
+      transform: buttonStateTransform,
+      transition: Transition.easeOut(),
+      backgroundColor: datePicker.selectColor,
+    },
+  };
+}
+
 const DayButton = React.createClass({
 
   propTypes: {
@@ -19,15 +75,10 @@ const DayButton = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [
-    StylePropable,
-  ],
-
   getDefaultProps() {
     return {
       selected: false,
@@ -48,15 +99,10 @@ const DayButton = React.createClass({
     };
   },
 
-  //to update theme inside state whenever a new theme is passed down
-  //from the parent / owner using context
   componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
-    this.setState({muiTheme: newMuiTheme});
-  },
-
-  getTheme() {
-    return this.state.muiTheme.datePicker;
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
   },
 
   _handleMouseEnter() {
@@ -85,51 +131,11 @@ const DayButton = React.createClass({
       ...other,
     } = this.props;
 
-    let styles = {
-      root: {
-        boxSizing: 'border-box',
-        WebkitTapHighlightColor: 'rgba(0,0,0,0)',
-        position: 'relative',
-        float: 'left',
-        width: 41,
-        padding: '4px 2px',
-      },
-
-      label: {
-        position: 'relative',
-        color: this.state.muiTheme.rawTheme.palette.textColor,
-      },
-
-      buttonState: {
-        position: 'absolute',
-        height: 36,
-        width: 36,
-        top: 2,
-        opacity: 0,
-        borderRadius: '50%',
-        transform: 'scale(0)',
-        transition: Transition.easeOut(),
-        backgroundColor: this.getTheme().selectColor,
-      },
-    };
-
-    if (this.state.hover) {
-      styles.label.color = this.getTheme().selectTextColor;
-      styles.buttonState.opacity = '0.6';
-      styles.buttonState.transform = 'scale(1)';
-    }
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
 
-    if (this.props.selected) {
-      styles.label.color = this.getTheme().selectTextColor;
-      styles.buttonState.opacity = 1;
-      styles.buttonState.transform = 'scale(1)';
-    } else if (this.props.disabled) {
-      styles.root.opacity = '0.6';
-    }
-
-    if (DateTime.isEqualDate(this.props.date, new Date()) && !this.props.selected) {
-      styles.label.color = this.getTheme().color;
-    }
+    const styles = getStyles(this.props, this.state);
 
     return this.props.date ? (
       <EnhancedButton
@@ -144,11 +150,11 @@ const DayButton = React.createClass({
         onTouchTap={this._handleTouchTap}
         onKeyboardFocus={this._handleKeyboardFocus}
       >
-        <div style={this.prepareStyles(styles.buttonState)} />
-        <span style={this.prepareStyles(styles.label)}>{this.props.date.getDate()}</span>
+        <div style={prepareStyles(styles.buttonState)} />
+        <span style={prepareStyles(styles.label)}>{this.props.date.getDate()}</span>
       </EnhancedButton>
     ) : (
-      <span style={this.prepareStyles(styles.root)} />
+      <span style={prepareStyles(styles.root)} />
     );
   },
 
diff --git a/src/date-picker/year-button.jsx b/src/date-picker/year-button.jsx
index 1b8497aaff25be..680aaeecfead42 100644
--- a/src/date-picker/year-button.jsx
+++ b/src/date-picker/year-button.jsx
@@ -1,8 +1,51 @@
 import React from 'react';
-import StylePropable from '../mixins/style-propable';
 import EnhancedButton from '../enhanced-button';
 import getMuiTheme from '../styles/getMuiTheme';
 
+function getStyles(props, state) {
+  const {
+    selected,
+    year,
+  } = props;
+
+  const {
+    hover,
+  } = state;
+
+  const {
+    baseTheme,
+    datePicker,
+  } = state.muiTheme;
+
+  return {
+    root: {
+      boxSizing: 'border-box',
+      WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+      position: 'relative',
+      display: 'block',
+      margin: '0 auto',
+      width: 36,
+      fontSize: 14,
+      padding: '8px 2px',
+      color: year === new Date().getFullYear() && datePicker.color,
+    },
+    label: {
+      position: 'relative',
+      top: -1,
+      color: hover || selected ? datePicker.selectTextColor : baseTheme.palette.textColor,
+    },
+    buttonState: {
+      position: 'absolute',
+      height: 32,
+      width: 32,
+      opacity: hover ? 0.6 : selected ? 1 : 0,
+      borderRadius: '50%',
+      transform: hover || selected ? 'scale(1.5)' : 'scale(0)',
+      backgroundColor: datePicker.selectColor,
+    },
+  };
+}
+
 const YearButton = React.createClass({
 
   propTypes: {
@@ -19,15 +62,10 @@ const YearButton = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [
-    StylePropable,
-  ],
-
   getDefaultProps() {
     return {
       selected: false,
@@ -47,15 +85,10 @@ const YearButton = React.createClass({
     };
   },
 
-  //to update theme inside state whenever a new theme is passed down
-  //from the parent / owner using context
   componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
-    this.setState({muiTheme: newMuiTheme});
-  },
-
-  getTheme() {
-    return this.state.muiTheme.datePicker;
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
   },
 
   _handleMouseEnter() {
@@ -79,50 +112,11 @@ const YearButton = React.createClass({
       ...other,
     } = this.props;
 
-    let styles = {
-      root: {
-        boxSizing: 'border-box',
-        WebkitTapHighlightColor: 'rgba(0,0,0,0)',
-        position: 'relative',
-        display: 'block',
-        margin: '0 auto',
-        width: 36,
-        fontSize: 14,
-        padding: '8px 2px',
-      },
-
-      label: {
-        position: 'relative',
-        top: -1,
-        color: this.state.muiTheme.rawTheme.palette.textColor,
-      },
-
-      buttonState: {
-        position: 'absolute',
-        height: 32,
-        width: 32,
-        opacity: 0,
-        borderRadius: '50%',
-        transform: 'scale(0)',
-        backgroundColor: this.getTheme().selectColor,
-      },
-    };
-
-    if (this.state.hover) {
-      styles.label.color = this.getTheme().selectTextColor;
-      styles.buttonState.opacity = 0.6;
-      styles.buttonState.transform = 'scale(1.5)';
-    }
-
-    if (selected) {
-      styles.label.color = this.getTheme().selectTextColor;
-      styles.buttonState.opacity = 1;
-      styles.buttonState.transform = 'scale(1.5)';
-    }
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
 
-    if (year === new Date().getFullYear()) {
-      styles.root.color = this.getTheme().color;
-    }
+    const styles = getStyles(this.props, this.state);
 
     return (
       <EnhancedButton
@@ -134,8 +128,8 @@ const YearButton = React.createClass({
         onMouseLeave={this._handleMouseLeave}
         onTouchTap={this._handleTouchTap}
       >
-        <div style={this.prepareStyles(styles.buttonState)} />
-        <span style={this.prepareStyles(styles.label)}>{year}</span>
+        <div style={prepareStyles(styles.buttonState)} />
+        <span style={prepareStyles(styles.label)}>{year}</span>
       </EnhancedButton>
     );
   },