diff --git a/common/changes/office-ui-fabric-react/master_2018-01-20-01-21.json b/common/changes/office-ui-fabric-react/master_2018-01-20-01-21.json
new file mode 100644
index 0000000000000..10256a7c238b1
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/master_2018-01-20-01-21.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "SpinButton: Add getClassNAmes prop to allow complete customization of the component",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "kysedate@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
index 43d76e8e109d2..7b930cce7a2c0 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
@@ -141,13 +141,20 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
       keyboardSpinDirection
     } = this.state;
 
-    const classNames = getClassNames(
-      getStyles(theme!, customStyles),
-      !!disabled,
-      !!isFocused,
-      keyboardSpinDirection,
-      labelPosition
-    );
+    const classNames = this.props.getClassNames ?
+      this.props.getClassNames(
+        theme!,
+        !!disabled,
+        !!isFocused,
+        keyboardSpinDirection,
+        labelPosition
+      ) : getClassNames(
+        getStyles(theme!, customStyles),
+        !!disabled,
+        !!isFocused,
+        keyboardSpinDirection,
+        labelPosition
+      );
 
     return (
       <div className={ classNames.root }>
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts
index f00467988a911..862cda39c3125 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { Position } from '../../utilities/positioning';
 import { IIconProps } from '../../Icon';
 import { ITheme, IStyle } from '../../Styling';
+import { ISpinButtonClassNames } from './SpinButton.classNames';
+import { KeyboardSpinDirection } from './SpinButton';
 import { IButtonStyles } from '../../Button';
 
 export interface ISpinButton {
@@ -133,6 +135,18 @@ export interface ISpinButtonProps {
    */
   styles?: Partial<ISpinButtonStyles>;
 
+  /**
+   * Custom function for providing the classNames for the spinbutton. Can be used to provide
+   * all styles for the component instead of applying them on top of the default styles.
+   */
+  getClassNames?: (
+    theme: ITheme,
+    disabled: boolean,
+    isFocused: boolean,
+    keyboardSpinDirection: KeyboardSpinDirection,
+    labelPosition?: Position
+  ) => ISpinButtonClassNames;
+
   /**
    * Custom styles for the upArrow button.
    *