diff --git a/docs/src/app/components/pages/components/time-picker.jsx b/docs/src/app/components/pages/components/time-picker.jsx
index 29729437f5f1c0..c231ed1207353f 100644
--- a/docs/src/app/components/pages/components/time-picker.jsx
+++ b/docs/src/app/components/pages/components/time-picker.jsx
@@ -49,6 +49,18 @@ let TimePickerPage = React.createClass({
             header: 'default: false',
             desc: 'It\'s technically more correct to refer to "12 noon" and "12 midnight" rather than "12 a.m." and "12 p.m." and it avoids real confusion between different locales. By default (for compatibility reasons) TimePicker uses (12 a.m./12 p.m.) To use (noon/midnight) set pedantic={true}.',
           },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of TimePicker\'s root element.',
+          },
+          {
+            name: 'textFieldStyle',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of TimePicker\'s TextField element.',
+          },
         ],
       },
       {
@@ -137,6 +149,20 @@ let TimePickerPage = React.createClass({
             format="24hr"
             hintText="AutoOk"
             autoOk={true} />
+
+          <TimePicker
+            ref="pickerTextfieldStyle"
+            format="24hr"
+            hintText="Override text field style"
+            textFieldStyle={{ fontSize: 'x-large' }} />
+
+          <TimePicker
+            ref="pickerStyle"
+            format="24hr"
+            hintText="Override style"
+            textFieldStyle={{ width: '80%' }}
+            style={{ padding: '5px', borderRadius: '5px', backgroundColor: '#d1d1d1' }} />
+
         </CodeExample>
       </ComponentDoc>
     );
diff --git a/docs/src/app/components/raw-code/time-picker-code.txt b/docs/src/app/components/raw-code/time-picker-code.txt
index 3b99da56d9692a..54061ebef9ca7f 100644
--- a/docs/src/app/components/raw-code/time-picker-code.txt
+++ b/docs/src/app/components/raw-code/time-picker-code.txt
@@ -12,3 +12,15 @@
 <TimePicker
   hintText="AutoOk"
   autoOk={true} />
+
+//Override TextField/Input Style
+<TimePicker
+  format="24hr"
+  hintText="Override text field style"
+  textFieldStyle={{ fontSize: 'x-large' }} />
+
+//Override Container/Root Element Style
+<TimePicker
+  hintText="Override style"
+  textFieldStyle={{ width: '80%' }}
+  style={{ padding: '5px', borderRadius: '5px', backgroundColor: '#d1d1d1' }} />
diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx
index 9b78a57d4d28ba..a8fab683100d21 100644
--- a/src/time-picker/time-picker.jsx
+++ b/src/time-picker/time-picker.jsx
@@ -24,6 +24,12 @@ const TimePicker = React.createClass({
     onChange: React.PropTypes.func,
     onShow: React.PropTypes.func,
     onDismiss: React.PropTypes.func,
+    style: React.PropTypes.object,
+    textFieldStyle: React.PropTypes.object,
+  },
+
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
   },
 
   windowListeners: {
@@ -36,6 +42,7 @@ const TimePicker = React.createClass({
       format: 'ampm',
       pedantic: false,
       autoOk: false,
+      style: {},
     };
   },
 
@@ -84,6 +91,8 @@ const TimePicker = React.createClass({
       onTouchTap,
       onShow,
       onDismiss,
+      style,
+      textFieldStyle,
       ...other,
     } = this.props;
 
@@ -94,9 +103,10 @@ const TimePicker = React.createClass({
     }
 
     return (
-      <div>
+      <div style={this.prepareStyles(style)}>
         <TextField
           {...other}
+          style={textFieldStyle}
           ref="input"
           defaultValue={defaultInputValue}
           onFocus={this._handleInputFocus}